can't select id or class in html dom

Question

I'm new to HTML and especially HTML5.

I'm trying to select the header with id of mr and change it to the length of the number of items that have para as its class.

Nothing seems to be changing in my browser view.

Not sure why. Thanks.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        var items = document.getElementsByClassName("para");
        var log = document.getElementById("mr");
        log.innerText = items.length;
    </script>
    <title>Title</title>
    <html lang="en"/>

</head>
<body>
    <header>
        <h1 id="mr">This is a header</h1>
    </header>

    <nav>
        <a href="index.html">Index</a>
    </nav>

    <section>
        <h1>Section 1</h1>

        <article>
            <p class="para">here is bla lakjfbsjkafb asje bfjlsaeb jlfkaseb ljkfabejkf bajekbf</p>
        </article>

        <article>
            <p class="para"> <mark>here is some more shit</mark></p>
        </article>

    </section>

    <footer>

    </footer>
</body>
</html>

Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Patrick Evans, Mar 08 '16 at 06:32

brk · Answer 1 · 2016-03-08T06:35:01.843

Neither para nor mr is present in DOM when the script is running.

Option 1

Just put the script part before closing body tag

 <script>
            var items = document.getElementsByClassName("para");
            var log = document.getElementById("mr");
            log.innerText = items.length;
        </script> 
     </body>

Option 2

If you still want to put it inside head tag put the js inside window.onload

<script>
     window.onload=function(){   
       var items = document.getElementsByClassName("para");
        var log = document.getElementById("mr");
        log.innerText = items.length;
     }
    </script>

Plunker

score 0 · Answer 2 · answered Mar 08 '16 at 06:33

The thing you have to remember about HTML is that it's read and parsed from top to bottom. Meaning things that are on the top get rendered first while things at the bottom, later. It's usually good practice to put JS at the end of the body or defer it till the page loads.

<body>
  <h1 id="mr">This is a header</h1>
  <p class="para">here is bla lakjfbsjkafb asje bfjlsaeb jlfkaseb ljkfabejkf bajekbf</p>
  <p class="para">
    <mark>here is some more stuff</mark>
  </p>

  <script>
    var items = document.getElementsByClassName("para");
    var log = document.getElementById("mr");
    log.innerText = items.length;
  </script>
</body>

</html>

score 0 · Answer 3 · answered Mar 08 '16 at 06:33

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
    function startup() {
    var items = document.getElementsByClassName("para");
    var log = document.getElementById("mr");
    log.innerText = items.length;
    }
</script>
<title>Title</title>
<html lang="en"/>

</head>
<body onload="startup();">
    <header>
        <h1 id="mr">This is a header</h1>
</header>

<nav>
    <a href="index.html">Index</a>
</nav>

<section>
    <h1>Section 1</h1>

    <article>
        <p class="para">here is bla lakjfbsjkafb asje bfjlsaeb jlfkaseb ljkfabejkf bajekbf</p>
    </article>

    <article>
        <p class="para"> <mark>here is some more shit</mark></p>
    </article>

</section>

<footer>

</footer>
</body>
</html>

the script runs before the page has loaded, to fix this we run the code once the body loads.

score 0 · Answer 4 · answered Mar 08 '16 at 06:33

Put your js code in the scripts tag inside document.onload event, since after this event will ensure that by the time this event is fired your DOM elements are loaded and ready to be accessed by DOM API.

 <script>
  document.onload = function(){

        var items = document.getElementsByClassName("para");
        var log = document.getElementById("mr");
        log.innerText = items.length;

  };
 </script>

cromir · Answer 5 · 2016-03-08T08:20:48.423

First your script should be at the end which help loading the content the user sees first faster and also it makes shure that all the DOM elements are loaded. Second i would replace log.innerText with log.innerHTML because somehow log.innerText doesnt really work for me and i prefer log.innerHTML anyway because there you can use html tags and stuff.

So heres a script that works at least for me:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <title>Title</title>
  <html lang="en" />

</head>

<body>
  <header>
    <h1 id="mr">This is a header</h1>
  </header>

  <nav>
    <a href="index.html">Index</a>
  </nav>

  <section>
    <h1>Section 1</h1>

    <article>
      <p class="para">here is bla lakjfbsjkafb asje bfjlsaeb jlfkaseb ljkfabejkf bajekbf</p>
    </article>

    <article>
      <p class="para">
        <mark>here is some more stuff</mark>
      </p>
    </article>

  </section>

  <footer>

  </footer>
  <script>
    var items = document.getElementsByClassName("para");
    var log = document.getElementById("mr");
    log.innerHTML = items.length;
  </script>
</body>

</html>

can't select id or class in html dom

5 Answers5