не может заставить работать javascript, это проблема с ID? - PullRequest
Новая
       0

не может заставить работать javascript, это проблема с ID?

0 голосов
/ 10 февраля 2012

Привет всем, я пытаюсь получить сообщение, которое появляется, когда пользователь щелкает изображение с идентификатором «lifeCalculatorButton», но я не могу понять, как заставить его работать.Я знаю, что html doc ссылается на js doc нормально, так что это не проблема.Есть идеи? 

    <html>
    <head>
<link rel="Stylesheet" type="text/css" href="apps.css" />
<script type="text/javascript" src="apps.js"></script>
<title>my apps</title>
    </head>
    <body>
<div id="breaks">
    <a href="http://info" > <img src="homeicon.png" /> </a>
    <br>
    <br>
    <br>
    <br>
    <br>
<div id="appTable" style="float: left">
    <table border="0" id="appTable">
        <tr>
        <td>life calculator</td>
        </tr>
        <tr>
        <td>punny!</td>
        </tr>
        <tr>
        <td>drink roulette (on its way!)</td>
        </tr>
    </table>
</div>
<div id="arrowTable" style="float: left">
    <table border="0">
        <tr>
    <td id="lifeCalculatorButton"><img src="arrow1.png" width="45"</td>
        </tr>
        <tr>
        <td id="punnyButton"><img src="arrow1.png" width="45"/></td>
        </tr>
        <tr>
        <td id="drinkRouletteButton"><img src="arrow1.png" width="45"/></td>
        </tr>
    </table>
</div style="clear: both">
<div id="content">
    my  apps :)
</div>

А вот и JavaScript: 

    var foo = document.getElementById('lifeCalculatorButton');
    foo.onClick = function (){
    document.getElementById('content').innerHTML = 'foo';
    };

Ответы [ 4 ]

2 голосов
/ 10 февраля 2012

Попробуйте изменить событие onclick на все строчные. 

var foo = document.getElementById('lifeCalculatorButton');
foo.onclick = function (){
    document.getElementById('content').innerHTML = 'foo';
};

EDIT

Приведенный ниже код работает как в Firefox, так и в IE. Я изменил событие с foo.onClick на foo.onclick. Убедитесь, что ваш блок JavaScript находится в конце страницы, или вызов getElementById вернет ноль. Кроме того, вам следует закрыть незамкнутый тег <img> и удалить стиль = "clear: both" со второго до последнего закрытия </div> в нижней части страницы. 

<html>
  <head>
    <link rel="Stylesheet" type="text/css" href="apps.css" /> 
    <title>my apps</title>
  </head>
  <body>
    <div id="breaks">
      <a href="http://info"><img src="homeicon.png" /></a>
        <br /><br /><br /><br /><br />
    <div id="appTable" style="float: left">
      <table border="1" id="appTable">
        <tr><td>life calculator</td></tr>
        <tr><td>punny!</td></tr>
        <tr><td>drink roulette (on its way!)</td></tr>
      </table>
    </div>
    <div id="arrowTable" style="float: left">
      <table border="1">
        <tr><td id="lifeCalculatorButton"><img src="arrow1.png" width="45"/></td></tr>
        <tr><td id="punnyButton"><img src="arrow1.png" width="45"/></td></tr>
        <tr><td id="drinkRouletteButton"><img src="arrow1.png" width="45"/></td></tr>
      </table>
    </div>
    <div id="content">
        my  apps :)
    </div>
  </body>
</html>
<script type="text/javascript">
  var foo = document.getElementById('lifeCalculatorButton')
  foo.onclick = function (){
  document.getElementById('content').innerHTML = 'foo';
  }; 
</script>

EDIT

Если вы используете внешний файл javascript, вы должны использовать обработчик событий window.onload, чтобы зарегистрировать свой обработчик и убедиться, что страница полностью загружена. 

window.onload = function () {
   var foo = document.getElementById('lifeCalculatorButton')
  foo.onclick = function (){
  document.getElementById('content').innerHTML = 'foo';
  }; 
};
0 голосов
/ 10 февраля 2012

Это может быть излишним, но это может быть хорошим предлогом для ознакомления с jQuery или подобной платформой.Это делает эту работу тривиальной для реализации.См. эту скрипку для ознакомления с рабочим экзаменом с использованием jQuery.

Если вы не хотите использовать jQuery, ваш javascript выглядит нормально , так как эта скрипка работает .

Как уже говорили другие, убедитесь, что вы не назначаете обработчик событий до тех пор, пока не загрузится DOM.Это сделано в приведенной выше скриптовой кодировке javascript с использованием следующего кода 

<script type='text/javascript'>//<![CDATA[ 
    window.onload=function(){
    var foo = document.getElementById('Clickable');
    foo.onclick = function (){
    alert("See It Works");    
  }; 
}//]]>

В примечании, следующем за комментарием выше, курсор не изменится при наведении курсора, поскольку браузер все еще интерпретирует элемент как что бы то ни былов данном случае это ячейка таблицы.Разница лишь в том, что ему теперь назначено событие.Чтобы изменить курсор, вам нужно сделать это с помощью CSS.

0 голосов
/ 10 февраля 2012

Нужно ли быть тд, который содержит идентификатор?Почему бы не использовать тег для обтекания изображения (и, как предложено, закройте тег img правильно с помощью />).Примените onclick к тегу a и вызовите функцию с возвращаемым ложным послесловием, чтобы обойти нормальное поведение ... и, очевидно, в вашем onclick вы можете вызывать любую функцию, которую хотите

0 голосов
/ 10 февраля 2012

Во-первых, вы, кажется, здесь опечатка: 

<td id="lifeCalculatorButton"><img src="arrow1.png" width="45"</td>

Тег <img> закрыт неправильно.

Вам также нужно либо переместить включение <script> внизу документа, либо присоединить к окну load событие, чтобы убедиться, что ваш скрипт выполняется после того, как соответствующие элементы появляются в DOM: 

window.onload = function () {
    var foo = document.getElementById("lifeCalculatorButton");
    // ...
};
...