Question

这是shan，我是一个javascript noob，我正在尝试将qa代码作为一个例子。我正在尝试将一个小的javascript内容加载到div元素，但它不起作用任何帮助都会很棒，这里是代码。

<html>
<head>
    <title>
    using d for statement
</title>
<script>
    function displaytext () {
     var loopindex=0;
     var sum=0;
     for (var loopindex=1; loopindex <=100; loopindex++) {
       sum +=loopindex;
     }; 
    document.getElementById('targetdiv').innerhtml="adding 1 to 100 gives "+sum;
    }
</script>
</head>
<body>
    <div id="targetdiv">

    </div>
</body>
</html>

Answer 1

您需要调用该函数。等到窗口加载也是一个好主意（或者你可以使用一些更高级的JS到detect the DOM ready state。）：

<html>
<head>
    <title>
    using d for statement
</title>
<script>
    function displaytext() {
     var loopindex=0;
     var sum=0;
     for (var loopindex=1; loopindex <=100; loopindex++) {
       sum +=loopindex;
     }; 
    document.getElementById('targetdiv').innerHTML = "adding 1 to 100 gives "+sum;
    }
    window.onload = function(){
      displaytext();
    }
</script>
</head>
<body>
    <div id="targetdiv">

    </div>
</body>
</html>

Answer 2

3个问题：

你实际上从未调用过该函数。它只是宣布。
该属性是innerHTML而不是innerhtml。 Javascript区分大小写。
脚本位于正在引用的元素之上。当脚本在找到时执行（页面构造在执行期间暂停），您所指的元素永远不会被找到。

你还要声明loopindex变量两次，我认为这会导致ES5严格的语法错误。

<html>
    <head>
        <title>
        using d for statement
        </title>
    </head>
    <body>
        <div id="targetdiv">

        </div>
    </body>
    <script>
        function displaytext () {
         var sum=0;
         for (var loopindex=1; loopindex <=100; loopindex++) {
           sum +=loopindex;
         }; 
        document.getElementById('targetdiv').innerHTML="adding 1 to 100 gives "+sum;
        }
        displaytext();
    </script>
</html>

无法使用javascript加载div中的内容

2 个答案: