0

Using document.getElementById("classname").innerText is not working. I also tried to use innerHTML but it still is not working. I can see the values increment on console but its not changing on text area in the document.The code is as follows:

<!DOCTYPE html>
<html>
<head>
<title>Learn</title>
<style>
    .main{
        margin: 5em;
        font-size: 3em;
    }
</style>
</head>
<body>
<div class="main">
Hello
<div class="count">0</div>
<div class="test">
    <button class="increment-btn" onclick="increment()">Increment</button>
</div>
</div>
<script>
let count=0
let counter=document.getElementById("count")
function increment()
{
counter=counter+1
counter.innerText=counter
console.log(counter)
}
</script>
</body>
</html>
Yadhu Krishnan
  • 1
  • 1
  • It looks to me like it's just a typo. You've done `counter=counter+1` but you meant `count=count+1` (and similarly, `counter.innerText=counter` should be `counter.innerText = count;`). `counter` is your DOM element, not your counter. Also, `getElementById` looks for an element **by ID**, not class. To find the first element of a class, use `document.querySelector(".count")`. – T.J. Crowder Oct 02 '22 at 11:12
  • @DavidThomas - The question did need to be closed, but it's not a duplicate of [that quesetion](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return). The question's code doesn't use any of those methods. (That said, I'm not going to vote to reopen, since it's clearly a typo-level issue.) – T.J. Crowder Oct 02 '22 at 11:13
  • I strongly recommend not using `onxyz`-attribute-style event handlers. Instead, use [modern event handling](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). – T.J. Crowder Oct 02 '22 at 11:16

0 Answers0