not able to load contents in div using javascript

Question

this is shan and i'm a javascript noob and i'm trying to work qa code as an example here. i'm trying to load a small javascript content to a div element but it is not working any help would be great and here is the code.

<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>

Where is the `displaytext()` being called? You might want to wrap it in a `document.onload()` call. — Schleis, Apr 09 '13 at 01:03
change `innerhtml` in `innerHTML`. Then call the function `displaytext()` as @Schleis suggested. — Ragnarokkr, Apr 09 '13 at 01:03

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

You need to call the function. It's also a good idea to wait until the window is loaded (or you can use some more advanced JS to 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>

edited May 23 '17 at 11:49

Community

1
1

answered Apr 09 '13 at 01:04

HellaMad

4,908
6
29
51

1

and properties in JS are case sensitive, so `innerHTML`, not the `innerhtml` – outcoldman Apr 09 '13 at 01:05
still no luck guys the result isn't loading in the browser. – jackal4me Apr 09 '13 at 01:15

Iain · Answer 2 · 2013-04-09T01:16:43.167

3 problems:

You never actually call the function. It is only declared.
The property is innerHTML not innerhtml. Javascript is case-sensitive.
The script is above an element is is referencing. As scripts are executed as they are found (page construction is paused during execution) the element you are referring to is never found.

Also you declare the loopindex variable twice, which i think will cause a syntax error on ES5 strict.

<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>

not able to load contents in div using javascript

2 Answers2