New course! Every coder should learn Generative AI!
Try a free lesson+ 1
Why is this code not functioning well? SOLVED
Why doesn't the button make the html button add numbers to h2. Fix the bug if you can. https://sololearn.com/compiler-playground/WOl2vTnKma3Z/?ref=app https://sololearn.com/compiler-playground/WOl2vTnKma3Z/?ref=app
13 Answers
+ 1
Eriito
ok... delete everything in the js tab.
copy-paste this in the html tab.
<html>
<head>
</head>
<body>
<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn" onclick="increment()">increment</button>
<script>
let count = 1
const countEl =
document.getElementById("count-el")
function increment() {
countEl.textContent = count++
}
</script>
</body>
</html>
+ 1
at first:
close the quotation mark at the line 11
line 10: you are calling a function from a javascript. function calls needs ()
I hope this helps
+ 1
it is simpler if you move the code from the js tab and put it inside <script></script> tags in the html.
otherwise, you need to wrap your code inside
onload=()=>{
.....your js code...
}
to ensure that the html loads first.
Also, you would need to assign the callback functions in js and remove the onclick attribute from the html tag:
onclick="increment()"
does not work if your js code is in the js tab.
also,
<script src="index.js"></script>
does nothing in Sololearn.
+ 1
Sololearn's web codebits have an unusual structure.
You can't treat each tab like a separate file and link them to the html via the src attribute. Also, the js tab loads before the html tab. this is the source of confusion to most user where js is failing to find the dom elements.
The simplest solution is just to write the js inside script tags in the html tab.
The other common method is to run the js after the onload event.
+ 1
.... I wrote the same, but with different words: just gave all the instructions, not the exact code. I've tried it that way, it worked well....
0
That made the increment button count, but...
The h2 header is not increasing in number.
0
That is exactly what I needed, thank you.
0
Bob_Li , would you like to explain for me what does "count++" that you coded do?
0
it is the same as
count = count + 1;
0
Bob_Li , can you tell me exactly what made the button become able to keep counting up?
0
if you write the code in the html tab like this:
<script>
....your js code...
function increment(){
...
}
</script>
then the
<button onclick="increment()">
will be able to find the increment function and run it everytime the button is clicked. The increment function then changes the textContent of the h2 element to make it count up.
if you put the code in the js tab, the html onclick attibute cannot find the function.
if you want to write the code in the js tab, you must also assign the event listeners using javascript.
0
Thank you for this precise answer, you got a follower. Pro Programmer!!!
0
Mihaly Nyilas
true, it is best not to give the entire code and let the OP figure out the answer.
But sometimes it is clear that some confusion is going on or that some concept is not clear. Then it is faster to just give the code and explain what is happening.
Often have questions like this?
Learn more efficiently, for free:
Hot today
Python Question
4 Votes
How to learn fast C?
0 Votes
Initials of name
1 Votes
Python Core - restarting?
1 Votes
post your python code here)
2 Votes
Css In python
0 Votes