Counter Not being changed-CodePudding

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>

CodePudding user response：

Two things:

You have to initalize counterNum to 0, otherwise its default value is undefined, which, when incremented, is NaN
You are modifying the element's value, which does not affect the element's content. Instead, assign counterNum to the element's textContent or innerHTML.

<!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>

CodePudding user response：

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.