Doing a project on a counter that can be changed by buttons, however the counter won't change. Chrome inspect element debug console thing isn't finding anything either.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Counter</title>
</head>
<body>
<br><br><br><br>
<font size="4">
<h1 align="center">Counter</h1>
</font>
<font size="5">
<h2 align="center" id="counter">0</h2>
</font>
<div align="center">
<br>
<button onclick="decrease()" >Decrease</button>
<button onclick="reset()" >Reset</button>
<button onclick="increase()" >Increase</button>
</div>
<script>
var counterNum
function decrease() {
counterNum = counterNum - 1
document.getElementById("counter").value = ""+ counterNum;
}
function reset() {
counterNum = counterNum * 0
document.getElementById("counter").value = ""+ counterNum;
}
function increase() {
counterNum = counterNum + 1
document.getElementById("counter").value = ""+ counterNum;
}
</script>
</body>
</html>
2 Answers 2
Two things:
You have to initalize
counterNumto0, otherwise its default value isundefined, which, when incremented, isNaNYou are modifying the element's
value, which does not affect the element's content. Instead, assigncounterNumto the element'stextContentorinnerHTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Counter</title>
</head>
<body>
<br><br><br><br>
<font size="4">
<h1 align="center">Counter</h1>
</font>
<font size="5">
<h2 align="center" id="counter">0</h2>
</font>
<div align="center">
<br>
<button onclick="decrease()" >Decrease</button>
<button onclick="reset()" >Reset</button>
<button onclick="increase()" >Increase</button>
</div>
<script>
var counterNum = 0
function decrease() {
counterNum = counterNum - 1
document.getElementById("counter").textContent = ""+ counterNum;
}
function reset() {
counterNum = counterNum * 0
document.getElementById("counter").textContent = ""+ counterNum;
}
function increase() {
counterNum = counterNum + 1
document.getElementById("counter").textContent = ""+ counterNum;
}
</script>
</body>
</html>
answered Sep 29, 2021 at 23:40
Spectric
32.6k6 gold badges32 silver badges56 bronze badges
Sign up to request clarification or add additional context in comments.
6 Comments
Atramentis
is the only difference changing the .value to .innerHTML? If so, why? I did this other project where you clicked a picture and it increased a number in an input box and .value worked? Could you tell me what the difference is?
Spectric
@Atramentis for input elements,
value defines the data. For div elements, the value attribute does not affect the output.Atramentis
So if I used <input> instead of <h2> .value would work? also does .innerHTML work with both?
Atramentis
Im blind I thought you changed
.value to .innerHTML my bad. So .value is for <input> and .textContent?Spectric
@Atramentis
value would work for the input, not the h2. innerHTML should be used for the h2. |
Personally, I would use a constructor or class. Of course, you should use external CSS and JavaScript so it's cached. Here's my two cents:
//<![CDATA[
/* js/external.js */
let doc, htm, bod, nav, M, I, mobile, S, Q, hC, aC, rC, tC, Counter; // for use on other loads
addEventListener('load', ()=>{ // reduce code you will reuse a lot
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id); mobile = /Mobi/i.test(nav.userAgent);
S = (selector, within)=>{
let w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within)=>{
let w = within || doc;
return w.querySelectorAll(selector);
}
hC = (node, className)=>{
return node.classList.contains(className);
}
aC = (node, ...classNames)=>{
node.classList.add(...classNames);
return aC;
}
rC = (node, ...classNames)=>{
node.classList.remove(...classNames);
return rC;
}
tC = (node, className)=>{
node.classList.toggle(className);
return tC;
}
Counter = function(start = 0, minLimit = -Infinity){
this.count = start; this.minLimit = minLimit;
this.increase = (by = 1)=>{
this.count += by;
return this;
}
this.decrease = (by = 1)=>{
if(this.count > this.minLimit)this.count -= by;
return this;
}
this.reset = (to = 0)=>{
this.count = to;
return this;
}
}
// small library above - magic below can be put on another page using a load Event (except // end load line)
// get elements only once if you can
const counter = new Counter, counter_val = I('counter_val');
I('decrease').onclick = ()=>{
counter_val.textContent = counter.decrease().count;
}
I('reset').onclick = ()=>{
counter_val.textContent = counter.reset().count;
}
I('increase').onclick = ()=>{
counter_val.textContent = counter.increase().count;
}
}); // end load
//]]>/* css/external.css */
*{
box-sizing:border-box;
}
html,body{
width:100%; height:100%; margin:0;
}
h1,h2{
margin:0;
}
.center{
display:flex; justify-content:center; align-items:center; flex-wrap:wrap; width:100%; height:100%;
}
.center>*{
width:100%; text-align:center;
}<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Counter</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='js/external.js'></script>
</head>
<body>
<div class='center'>
<h1 id='counter_title'>Counter</h1>
<h2 id='counter_val'>0</h2>
<div id='counter_buttons'>
<button id='decrease' type='button'>Decrease</button>
<button id='reset' type='button'>Reset</button>
<button id='increase' type='button'>Increase</button>
</div>
</div>
</body>
</html>I removed your depreciated <font> tags. Of course, you've noticed that you need to initialize your counter to a Number, instead of undefined.
answered Sep 30, 2021 at 0:32
StackSlave
10.6k2 gold badges20 silver badges35 bronze badges
1 Comment
Atramentis
Thanks for the feedback, I'm extremely new to coding and thus don't know any CSS. I also don't know what caches are nor anything else lol.
default