Javascript/html5 selector

Question

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?

<div id="result" class="well" should have > at the end for starters: <div id="result" class="well"> — Kaarel
– Kaarel, Commented Apr 24, 2014 at 11:27

James Donnelly · Accepted Answer · 2014-04-24 11:35:14Z

3

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

edited Apr 24, 2014 at 11:35

answered Apr 24, 2014 at 11:29

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BoltClock Over a year ago

1 and 2 have no effect on markup validity, although to be fair the OP does seem to be trying to adhere to XHTML syntax by self-closing their void elements, in which case all start and end tags for html, head and body should be included.

James Donnelly Over a year ago

@BoltClock well I never knew that! How interesting. I've modified my answer.

Quentin · Accepted Answer · 2014-04-24 11:33:00Z

3

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/

edited Apr 24, 2014 at 11:33

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

answered Apr 24, 2014 at 11:30

bang

5,2711 gold badge28 silver badges31 bronze badges

Collectives™ on Stack Overflow

Javascript/html5 selector

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related