Функция javascript не работает при нажатии на ссылку

У меня есть довольно простая страница с навигацией по боковой панели и iFrame для загрузки контента.

Я хочу изменить содержимое iFrame, нажав на ссылки в боковой панели навигации. Я использую JavaScript для изменения источника (.src) document.element.

Я прочитал множество статей (Stackru), и код должен работать, но это не так.

Код ниже - это HTML-страница, которую я создал, и она включает JS в тег.

<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
    function getContent{

        document.getElementById("contentFrame").src="LoremIpsum.html";  

    }
    </script>


</head>

<body>
<div class="sidebar"><h1>Technical Documentation</h1>
<ul>
    <li>Configuration Guides</li>
    <li>API Guides</li>
    <li><a href="" onclick='getContent()'> LoremIpsum</a></li>
</ul>
<!-- <button onclick="getContent()">Lorem Ipsum</button>    -->

</div>


<iframe class="content"  id="contentFrame" src="dummy.html">
</iframe>

</body>
Источник

4 ответа

Ваша проблема была в том, что вы забыли добавить () после названия вашей функции.

Помимо этого, есть еще несколько вещей, которые нужно исправить:

Не используйте встроенные атрибуты событий HTML ( onclick , onmouseover и т. д.) как они:

  1. Создайте "код спагетти", который трудно читать и отлаживать.
  2. Привести к дублированию кода.
  3. Не хорошо масштабировать
  4. Не следуйте методологии развития разделения интересов.
  5. Создайте анонимные глобальные функции-оболочки вокруг значений вашего атрибута, которые изменяют this привязка в ваших функциях обратного вызова.
  6. Не следуйте стандарту событий W3C.
  7. Может вызвать утечки памяти в IE.

Вместо этого делайте всю свою работу в JavaScript и используйте .addEventListener() настроить обработчики событий.

Не используйте гиперссылку, когда подойдет кнопка (или другой элемент). Если вы используете гиперссылку, вам нужно отключить ее родное желание перемещаться, что делается путем установки href приписывать # не "",

// Place this code into a <script> element that goes just before the closing body tag (</body>).

// Get a reference to the button and the iframe
var btn = document.getElementById("btnChangeSrc");
var iFrame = document.getElementById("contentFrame");

// Set up a click event handler for the button
btn.addEventListener("click", getContent);

function getContent() {
  console.log("Old source was: " +  iFrame.src);
  iFrame.src="LoremIpsum.html";  
  console.log("New source is: " +  iFrame.src);
}
<div class="sidebar"><h1>Technical Documentation</h1>
<ul>
    <li>Configuration Guides</li>
    <li>API Guides</li>
</ul>
<button id="btnChangeSrc">Change Source</button>

</div>

<iframe class="content" id="contentFrame" src="dummy.html"></iframe>

Источник

Это синтаксическая ошибка. Круглые скобки требуются независимо от параметров функции. Однако рекомендуется размещать теги сценария внизу тега body.

Источник

У вас есть синтаксическая ошибка в объявлении функции (отсутствует скобка):

function getContent {
   document.getElementById("contentFrame").src="LoremIpsum.html";
}

Должно быть:

function getContent() {
   document.getElementById("contentFrame").src="LoremIpsum.html";
}

Вы также должны предотвратить событие по умолчанию для ссылки

<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
    function getContent(event) {
       event.preventDefault();
       document.getElementById("contentFrame").src="LoremIpsum.html";
    }
    </script>


</head>

<body>
<div class="sidebar"><h1>Technical Documentation</h1>
<ul>
    <li>Configuration Guides</li>
    <li>API Guides</li>
    <li><a href="#" onclick='getContent(event)'> LoremIpsum</a></li>
</ul>
<!-- <button onclick="getContent()">Lorem Ipsum</button>    -->

</div>


<iframe class="content"  id="contentFrame" src="dummy.html">
</iframe>

</body>

Источник

Вы можете использовать javascript:void(0).

    <a href="javascript:void(0)" onclick='getContent(event)'> LoremIpsum</a>

Или верните false на JavaScript

     <script type="text/javascript">
function getContent(){

    document.getElementById("contentFrame").src="LoremIpsum.html";
    return false;

}
</script>
Источник
Другие вопросы по тегам