2015-05-19 11 views
-3

Почему JavaScript на этой странице не работает? Код: `JavaScript не работает: «Функция ожидается»

<!-- head --> 
<head> 

    <!-- title --> 
    <title></title> 

    <!-- title --> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <!-- fonts: sans-serif --> 
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> 
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> 
    <!-- fonts: serif --> 
    <link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'> 
    <link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'> 

    <!-- Bootstrap --> 
    <link rel="stylesheet" href="libs/bootstrap-3.3.4-dist/css/bootstrap.min.css"> 

    <!-- Custom CSS --> 
    <link href='css/main.css' rel='stylesheet' type='text/css'> 

    <!-- ======================================== --> 
    <!-- Page specific Javascript --> 

    <!-- script to change header content --> 
    <script> 
    </script> 

</head> 
<!-- /head --> 


<!-- body --> 
<body> 

    <!-- .container --> 
    <div class="container"> 

     <h1 id="heading" onmouseover="change" onmouseout="changeBack">Original heading</h1> 

    </div> 
    <!-- /.container --> 


    <!-- jQuery --> 
    <script type="text/javascript" src="libs/jquery-1.11.3/jquery.min.js"></script> 

    <!-- Bootstrap Javascript --> 
    <script type="text/javascript" src="libs/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script> 

    <!-- Custom Javascript --> 
    <script type="text/javascript" src="js/app.js"></script> 

    <!-- Page specific Javascript --> 
    <!-- script to change header content --> 
    <script> 
      function change() { 
       var heading = document.getElementById('heading'); 
       heading.innerHTML("Changed heading"); 
      } 

      function changeBack() { 
       var heading = document.getElementById('heading'); 
       heading.innerHTML("Original heading"); 
      } 
    </script> 


</body> 
<!-- /body --> 

`

Ничего не происходит, когда я парить над <h1>. В инструментах разработчика Internet Explorer 11 есть две ошибки, указывающие функции на линиях 67 & 72.

+4

Ну это поможет, если вы назвали функции, добавляя '()' им. И вы не должны использовать встроенные события. – epascarello

+0

'onmouseover =" change "' => 'onmouseover =" change() "и т. Д. – JAAulde

+0

@epascarello Нет. Это не помогает. – MorrisIriga

ответ

3

Вы действительно должны иметь () после методов в инлайн событий, как я уже говорил в комментариях.

Но проблема заключается в том, innerHTML не метод

heading.innerHTML("Changed heading") 

должен быть

heading.innerHTML = "Changed heading"; 

Reference: MDN innerHTML

+0

Спасибо! Я новичок, изучающий JavaScript. Это заставило меня с ума сойти на несколько минут. – MorrisIriga

2

Вам нужно поставить круглые скобки, если вы хотите, чтобы функции вызывались.

onmouseover="change()" onmouseout="changeBack()" 
Смежные вопросы