</head>
<body>
<button>Click Me</button>
<br>
<span id='count'>0</span> People Have clicked the button
<script>
$button = document.queryselector('button');
$span = document.queryselector('span');
function increment(){
$span.innerHTML++;
}
$button.addEventlistener('click',increment);
</script>
</body>
HTML (which is raw text) does not have an increment method.
let x = parseInt($span.textContent);
$span.textContent = (x++).toString(10);
This is not well formed. BODY should not (in terms of well formedness) contain any direct children that are not blocks. <span>
and raw text are inline elements.
<p><span>0</span> People have clicked the button.</p>
It is not necessary to use $ on variables, unless it is to give special meaning, which in this instance is not the case. Likewise, having id="count"
is redundant since you are caching the <span>
. Were there other SPAN elements in the document, then the id would be a must to be able to isolate it from the others.
I literally have no idea what i am doing. So i take all the help i can.
Any chance you can adjust the code to reflect what you mean?
<body>
<button>Click Me</button>
<p><span>0</span> People have clicked the button.</p>
<script>
const button = document.querySelector('button');
const span = document.querySelector('span');
function increment(){
let x = parseInt(span.textContent); // convert string to integer
span.textContent = (x++).toString(10); // increment and convert to text
}
button.addEventListener('click',increment);
</script>
</body>
ok - so i entered this code and it still wonât count my clicks. Any suggestions on what i might need to do?
if you are going to use built-in functions (methods) like querySelector, at least make sure you spell it right. See documentation:
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
My bad. Should have watched more closely.
It should work after that small correction.
easy thing to miss. Nope, still not working. addEventListener
also has a typo.
@kavuuu, javascript contains a lot of cammelCase, be aware
Man, do I need stronger glasses.
Itâs even in the name, JavaScript
. Of course, you mean, camelCase
.
i still canât get it to work - must be something wrong that i cant figure out. Iâm quite illiterate.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click Counter</title>
</head>
<body>
<button>Click Me</button>
<p><span>0</span> People have clicked the button.</p>
<script>
const button = document.querySelector('button');
const span = document.querySelector('span');
function increment(){
let x = parseInt(span.textContent);
x++;
span.textContent = x;
}
button.addEventListener('click', increment);
</script>
</body>
</html>
x++
returns the value of x
before increment, this seem to cause a problem given you are also converting to string. use ++x
which returns the value after increment.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click Counter</title>
</head>
<body>
<button>Click Me</button>
<p><span>0</span> People have clicked the button.</p>
<script>
const button = document.querySelector('button');
const span = document.querySelector('span');
function increment(){
let x = parseInt(span.textContent);
span.textContent = ++x;
}
button.addEventListener('click', increment);
</script>
</body>
</html>
All the conversion was unnecessary, as it turns out. Putting too much theoretical into this.
Thanks - got it to work