I am trying to make a button that increments a counter's value by 1 when clicked. My code, however, doesn't seem to work.

var count = 1;
var button = document.querySelector("#increment");

button.addEventListener("click", function() {
  var increment = document.getElementById("#count");
  increment.value = count;
  count++;
});

<h4>Current count: <span id="count">0</span></h4>
<div class="container">
  <button id="decrement">Decrement</button>
  <button id="increment">Increment</button>
</div>

I am trying to make a button that increments a counter's value by 1 when clicked. My code, however, doesn't seem to work.

var count = 1;
var button = document.querySelector("#increment");

button.addEventListener("click", function() {
  var increment = document.getElementById("#count");
  increment.value = count;
  count++;
});

<h4>Current count: <span id="count">0</span></h4>
<div class="container">
  <button id="decrement">Decrement</button>
  <button id="increment">Increment</button>
</div>

• javascript
• addeventlistener

• 1 When you use .getElementById() you are selecting elements by id, so you don't need the #. You do need it, though in querySelector. – double-beep Commented Jun 4, 2020 at 7:38

5 Answers 5

You don't need # in getElementById and use innerHTML to set value. Don't use querySelector when you can get by id.

Like this:

let count = 0;
const button = document.getElementById("increment");
const button2 = document.getElementById("decrement");
const textHolder = document.getElementById("count");
textHolder.innerHTML = count;

button.addEventListener("click", function() {
  textHolder.innerHTML = ++count;
});

button2.addEventListener("click", function() {
  textHolder.innerHTML = --count;
});

<h4>Current count: <span id="count">0</span></h4>
<div class="container">
  <button id="decrement">Decrement</button>
  <button id="increment">Increment</button>
</div>

Your code have some issues

1. Use # in query selector, remove it, it use in jquery
2. Wrong attribule value change to innerText
3. Change querySelector to getElementById to get id

var count = 1;
var button = document.getElementById("increment");

button.addEventListener("click", function() {
  var increment = document.getElementById("count");
  increment.innerText = count;
  count++;
});

<h4>Current count: <span id="count">0</span></h4>
<div class="container">
  <button id="decrement">Decrement</button>
  <button id="increment">Increment</button>
</div>

.document.getElementById() doesn't need CSS selector indicator, you can just pass the id value directly here is how to do it, note that I'm using + operator to make sure that the textContent parsed into integer, and to increment the value you can just add ++ after that to count tag that we have reference to, here is a working snippet:

var count = 1;
var IncrementBtn = document.querySelector("#increment");
var decrementBtn = document.querySelector("#decrement");

IncrementBtn.addEventListener("click", function() {
  var increment = document.getElementById("count");
  +increment.textContent++;
});

decrementBtn.addEventListener("click", function() {
  var decrement = document.getElementById("count");
  +decrement.textContent--;
});

<h4>Current count: <span id="count">0</span></h4>
<div class="container">
  <button id="decrement">Decrement</button>
  <button id="increment">Increment</button>
</div>

You can do this with this short JS inserted in the HTML button elements:

<h4>Current count: <span id="count">0</span></h4>
<div class="container">
  <button onclick="document.getElementById('count').innerText--">Decrement</button>
  <button onclick="document.getElementById('count').innerText++">Increment</button>
</div>

If you want to use a function you can try something like this:

function changeValue(diff) {
  var count = document.getElementById('count');
  count.innerText = +count.innerText + diff;
}

<h4>Current count: <span id="count">0</span></h4>
<div class="container">
  <button onclick="changeValue(-1)">Decrement</button>
  <button onclick="changeValue(1)">Increment</button>
</div>

    <input id="result"  type="text" class="form-control">

    <button onclick="Increment()" type="submit">+</button>
    <button onclick="Decrement()" type="submit">-</button>
    <button onclick="AllClear()">

AC

function function Increment() { result.value ++

    }
    function Decrement() {
        if(result.value>0){
            result.value  --
        }
        
        
    }


    function AllClear() {
        result.value = ""

    }