CODEWITHSUNDEEP
javascripthtml
Rentonie
Rentonie

Reputation: 477

Javascript/html5 selector

I'm trying to do the HTML5 fundamentals tutorial and this is so far my code :

<!DOCTYPE html>
<head>
    <script src="script.js"></script>
    <title>HTML Fundamentals</title>
</head>
<body>

    <div id="result" class="well"
        <div id="log">&nbsp;</div>
        <hr />
        <div class="item" id="div1">div 1</div>
        <div class="item" id="div2">div 2</div>
        <div class="item" id="div3">div 3</div>
        <div class="item" id="div4">div 4</div>
        <div class="item" id="div5">div 5</div>
        <div class="item" id="div6">div 6</div>
        <hr />
   </div>


function initiate() {

    var divs = document.querySelectorAll('div');
    var log = document.querySelector('#log');
    log.innerText = 'There are' + divs.length + 'DIVs on this page';

}

addEventListener("load", initiate);

But it does not show the message as i would like. Care to point out what i'm missing?

Upvotes: 1

Views: 82

Answers (2)

James Donnelly
James Donnelly

Reputation: 128791

Your HTML is invalid: You're missing a > on <div id="result" class="well".

Once you fix these you get an accurate result: JSFiddle demo. (6 .item div elements, 1 #log div element and 1 .well div element = 8 total).

Upvotes: 3

bang
bang

Reputation: 5221

You are missing an end of tag character

 <div id="result" class="well"

should be:

 <div id="result" class="well">

otherwise it seems to work fine. Here is a fiddle:

http://jsfiddle.net/B3b3N/

Upvotes: 3

Related Questions