Question

抱怨这样一个微不足道的问题（只是学习JS是如何工作的）但是我几乎没有头疼。也许我累了，只是看不到我在做什么，但为什么以下不起作用 - 即在'print'div的主体中打印的totalBits的值？如果我提醒（）它显示值但不使用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>

Answer 1

因为您在将元素呈现给页面之前调用它。加载元素后移动脚本，或者可以调用代码窗口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>

Answer 2

查看您的错误控制台。您应该将div is null作为错误，因为该元素尚未被解析。

您需要在 div元素之后放置脚本块，或者推迟执行脚本。

Answer 3

很可能你的JavaScritpt在DOM准备好之前就已经执行了。

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

您可以在此处看到它：http://jsfiddle.net/c8tyg/

P.S。我不是移动<script>块的粉丝，因为无论你如何在页面上加载它，IMHO JavaScript都应该有效。你正在操纵DOM - 尊重游戏 - 等待DOM加载。

innerHTML没有显示

3 个答案: