3

このような些細な質問をして申し訳ありません (JS の仕組みを学んでいるだけです)。たぶん私は疲れていて、自分が何をしているのかわかりませんが、なぜ以下が機能しないのですか?つまり、「印刷」divの本文に印刷するtotalBitsの値? alert() の場合、値は表示されますが、innerHTML は使用されません。

<html>
<head>
<title></title>
<script type="text/javascript">

function answer(sentence){

var bitsOfString = sentence.split(" ");
var numOfBits = bitsOfString.length;
return numOfBits;
}

var sentence = prompt("OK, say something!")
var totalBits = answer(sentence);
var div = document.getElementById("print");
div.innerHTML = totalBits;

</script>
</head>
<body>
<div id="print"></div>
</body>
</html>
4

3 に答える 3

4

要素がページにレンダリングされる前に呼び出しているためです。要素が読み込まれた後にスクリプトを移動するか、コード ウィンドウの onload/document ready を呼び出すことができます。

<html>
  <head>
    <title></title>    
  </head>
  <body>
    <div id="print"></div>
    <script type="text/javascript">

      function answer(sentence) {    
        var bitsOfString = sentence.split(" ");
        var numOfBits = bitsOfString.length;
        return numOfBits;
      }

      var sentence = prompt("OK, say something!")
      var totalBits = answer(sentence);
      var div = document.getElementById("print");
      div.innerHTML = totalBits;

    </script>

  </body>
</html>
于 2013-01-09T22:09:28.743 に答える
2

エラーコンソールを見てください。div is null要素がまだ解析されていないため、エラーとして表示されるはずです。

要素の後にスクリプト ブロックを配置するdivか、スクリプトの実行を延期する必要があります。

于 2013-01-09T22:09:02.673 に答える
1

ほとんどの場合、DOM の準備が整う前に JavaScritpt が実行されます。

document.onloadつまり、関数内で div を操作する場所、または jQuery を使用する場合は、javascript をラップします。$(function(){});

ここで動作することがわかります: http://jsfiddle.net/c8tyg/

PS私は<script>ブロックを移動するのが好きではありません。ページにどのようにロードするかに関係なく、JavaScriptが機能するはずだからです。あなたは DOM を操作しています - ゲームを尊重してください - DOM がロードされるのを待ちます。

于 2013-01-09T22:09:14.143 に答える