How can I create a button that increments a counter when clicked?

user_13023340 0
Viewed 6497

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>

addeventlistener javascript
4 Answers

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>

user_62426130

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>

user_49645690

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>

user_40740450

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

user_8963580
Related