はjavascriptを動作させることができませんが、それはIDの問題ですか？

こんにちはすべて私は "lifeCalculatorButton" IDにあるイメージをユーザーがクリックすると表示されるようにしようとしていますが、動作させる方法を理解できません。私はhtml docがjs docの罰金を参照していることを知っているので、それは問題ではありません。何か案は？はjavascriptを動作させることができませんが、それはIDの問題ですか？

<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'; 
    };

出典

2012-02-10 user1086348

まず、あなたはここにタイプミスを持っているように見える：

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

<img>タグが正しく閉じられていません。

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

出典

2012-02-10 02:21:10

このようにしてみるべきですか？：window.onLoad = function（）{ var foo = document.getElementById（ 'lifeCalculatorButton'）; foo.onClick = getElementById（ 'content'）。innerHTML = 'foo'; }; – user1086348

はい。それがアイディアです... –

hmm。まだ良いことはありません。私は、画像の上にカーソルを置くとカーソルが変わらないので、ブラウザがボタンとして見ているとは思わない。他のアイデア？ – user1086348

：

はまた、あなたの文書の下部に<script>には、移動したり、スクリプトがDOMに表示される問題の要素の後に実行されていることを確認するためのウィンドウにloadイベントを添付するか持っています

onclickイベントをすべて小文字に変更してください。

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

EDIT

以下のコードはFirefoxとIEの両方で動作します。イベントをfoo.onClickからfoo.onclickに変更しました。 JavaScriptブロックがページの最後にあることを確認するか、getElementByIdを呼び出すとnullが返されます。また、閉じられていない<img>タグを閉じて、ページの下部にある最後の</div>の最後の2番目から最後までのstyle = "clear：both"を削除する必要があります。

<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'; 
    }; 
};

出典

2012-02-10 02:33:36 Phaedrus

私はそれも前に考えましたが、違いはありませんでした。 – user1086348

私はこれをFirefoxとIEでテストしましたが、両方で動作します。あなたのページの最後に

はjavascriptを動作させることができませんが、それはIDの問題ですか？

答えて

関連する問題