About as basic "Newbie-Question" that you can get.

Joined
Aug 16, 2022
Messages
54
Reaction score
2
Hi Everybody,

I grabbed this code from like page 20 in a "JavaScript for Dummies" book, but it doesn't work on any browser I have
or in any editor I use:

JavaScript:
<!DOCTYPE HTML>
<html>
<head>
<title>Hello, HTML</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<script>
    function countToTen() {
        var count = 0;
        while (count < 10) {
            count++;
            document.getElementByID("theCount").innerHTML +=count + "<br>";
        }
    }
    Code-Line Before Listing Code
</script>
</head>
<body onload="countToTen();">
    <h1>Let's count to 10 with JavaScript</h1>
    <p id="theCount"></p>
</body>
</html>

I can load this into Chrome, Firefox, Edge and I will only see the <h1>Let's count to 10 with JavaScript</h1> line.
The Console tab from the Developer Tools in Chrome tells me:
Uncaught TypeError: document.getElementByID is not a function

What can I do about this? JavaScript is enabled in all of the browsers I use
 
Joined
Jul 4, 2023
Messages
507
Reaction score
63
Set line shown below as comment
JavaScript:
//Code-Line Before Listing Code

The issue is with the document.getElementByID line inside the countToTen function. The function name should be getElementById with a lowercase "d" and not "ID" in uppercase. JavaScript is case-sensitive, so it's important to use the correct spelling.

document.getElementById

HTML:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Hello, HTML</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <script>
      function countToTen() {
        var count = 0;
        while (count < 10) {
          count++;
          document.getElementById("theCount").innerHTML +=count + "<br>";
        }
      }
      //Code-Line Before Listing Code
    </script>
  </head>
  <body onload="countToTen();">
    <h1>Let's count to 10 with JavaScript</h1>
    <p id="theCount"></p>
  </body>
</html>


BTW,
JavaScript:
function countToTen() {
  let count = 0;
  while (count < 10)
    document.getElementById("theCount").innerHTML += (++count) + "<br>";
}
or
JavaScript:
function countToTen(count=0) {
  while (count < 10)
    document.getElementById("theCount").innerHTML += (++count) + "<br>";
}
 
Last edited:
Joined
Aug 16, 2022
Messages
54
Reaction score
2
Set line shown below as comment
JavaScript:
//Code-Line Before Listing Code

The issue is with the document.getElementByID line inside the countToTen function. The function name should be getElementById with a lowercase "d" and not "ID" in uppercase. JavaScript is case-sensitive, so it's important to use the correct spelling.



HTML:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Hello, HTML</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <script>
      function countToTen() {
        var count = 0;
        while (count < 10) {
          count++;
          document.getElementById("theCount").innerHTML +=count + "<br>";
        }
      }
      //Code-Line Before Listing Code
    </script>
  </head>
  <body onload="countToTen();">
    <h1>Let's count to 10 with JavaScript</h1>
    <p id="theCount"></p>
  </body>
</html>
$#@^&*!!Ø®»ÆÝ
That was easy and now it works!
Thanks VBService
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
474,056
Messages
2,570,440
Members
47,101
Latest member
DoloresHol

Latest Threads

Top