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

您的 JavaScritpt 很可能在 DOM 准备好之前执行。

换句话说，将您的 javascript 包装在您在document.onload函数中操作 div 的地方，或者如果您乐于使用 jQuery：$(function(){});

你可以看到它在这里工作：http: //jsfiddle.net/c8tyg/

PS 我不喜欢移动<script>块，因为恕我直言 JavaScript 应该可以工作，无论你如何在页面上加载它。您正在操纵 DOM - 尊重游戏 - 等待 DOM 加载。

于 2013-01-09T22:09:14.143 回答