1
<head>
  <script>
    document.getElementById("count-el").innertext = 3
  </script>
</head>
<body>
  <h1>People entered</h1>
  <h2 id="count-el">0</h2>

</body>
</html>

innertext is not getting changed from 0 to 3.

phuzi
  • 12,078
  • 3
  • 26
  • 50
Yuvraj Kushwaha
  • 33
  • 3
  • 1
    _"innertext is not getting changed..."_ - Because there's an error in the console. – Andreas Aug 17 '21 at 07:10
  • 1
    First you should pur `script` tab in the last of the body but before the end of `

    ` tag and second there is no such `innertext`, You should use `innerText`

     – DecPK Aug 17 '21 at 07:13

1 Answers1

0

There are two issues.

  1. The <script> tag should be inside your <body>, ideally at the bottom.

  2. You have spelled innerText incorrectly.

alternatively, you can use innerHTML or textContent as well

document.getElementById("count-el").innerText = 3
<h1>People entered</h1>
<h2 id="count-el">0</h2>
<body>
  <h1>People entered</h1>
  <h2 id="count-el">0</h2>

<script>
  document.getElementById("count-el").innerText = 3
</script>
</body>
ahsan
  • 1,409
  • 8
  • 11
  • 1
    The error on the console is "*Uncaught TypeError: Cannot set property 'innerText' of null*". This occurs even if `innerText` is spelled correctly. The reason is that the `document.getElementById("count-el").innerText = 3` is executed before the `count-el` element was rendered by the browser. To fix this, wait until the DOM is ready before running the script. – Georg Patscheider Aug 17 '21 at 07:18
  • You have two problems on your code, the first one is that your script is not being invoked by your `html body`, because it's only defined in the `html head`; the second problem is the property you're accessing, use `innerHTML` instead of `innertext`: `function change_data(){document.getElementById("count-el").innerHTML = 3}` ... `` – Maf Aug 17 '21 at 07:22