0

Here a very simple code(just getting started out):

       <head>

       </head>
       <title>Title here</title>
       <script src="index.js"></script>
       <body>
           <h1>People counter</h1>
           <h2 id="count-element">0</h2>
           <button id="increment-button" onclick="increment()">Increment</button>
       </body>
   </html>

Here is the index.js

let countElement = document.getElementById("count-element")
let count = 0

console.log(count)
function increment(){
    
    count =count +1
        countElement.innerText = count
    
}

The problem is: On clicking the button it fails:

I am using xampp on win 10(64) Even tried wampserver but both failed Tested on chrome and edge browsers BUT on codepen.io it works

Lorand Csiki
  • 1
  • 1
  • If it wasn't initialized it would be `undefined`, so you are initializing it to `null`. – Quentin Jun 28 '21 at 18:52
  • Writing from a mobile but could you change your two let statements to var statements? – Aydin K. Jun 28 '21 at 18:52
  • @AydinK. — Whatever for? `var` should be avoided unless you need to support ancient browsers. – Quentin Jun 28 '21 at 18:54
  • @quentin: I was just guessing that the issue might be due to variable scoping problems, but not 100% sure – Aydin K. Jun 28 '21 at 18:58
  • Okay, thanks for the answers but i managed to solve my problem: it was in the html file: the script tag was initiated in the head and not in the body tag. I put it in the body and the problem gone. – Lorand Csiki Jun 29 '21 at 19:20

0 Answers0