Hey guys i've made buttons of '+' and '-' and there is a number which i need to increase or decrease while pressing the + or -, here my code but it isn't working. Will be glad if you can help me.
thank you!
button class="plus_minus"></button><span class="number">1</span><button class="minus_plus"></button>
my JS
const plus = document.querySelector('.plus_minus'),minus = document.querySelector('.minus_plus');
let number = parseInt(document.querySelector('.number'));
plus.addEventListener('click',() => {number++ ;});
minus.addEventListener('click',() => {number--;
});
Anyway, I would suggest this:
HTML :
<button class="minus">-</button><span id="number">1</span><button class="plus">+</button>
One class for "minus" button and one class for "plus" button. In your code you didn't differenciate them.
JS:
const minus = document.querySelector('.minus')
const plus = document.querySelector('.plus');
plus.addEventListener('click',() => document.getElementById("number").textContent++);
minus.addEventListener('click',() => document.getElementById("number").textContent--);
Add two listeners that directly increment/decrement the value.
Right now you number variable is reference of the span element.
You should get the value (innerHTML) of that
let number = parseInt(document.querySelector('.number').innerHTML);
In the event listener you should update the DOM (innertHTML of span) again after the value is updated.
plus.addEventListener('click',() => {
number++ ;
document.querySelector('.number').innerHTML = number;
});
minus.addEventListener('click',() => {
number--;
document.querySelector('.number').innerHTML = number;
});
I updated your code and it will help you.
let number = parseInt(document.querySelector('.number'));
document.querySelector('.number') returns element with "number" classname , not it's content text.
document.querySelector('.number').innerText returns the element's content text.
let oldVal = 1;
let newVal = oldVal++;
// output: newVal = 1 oldVal = 2
let oldVal = 1;
let newVal = ++oldVal;
// output: newVal = 2 oldVal = 2
const plus = document.querySelector('.plus_minus'),
minus = document.querySelector('.minus_plus');
let number_el = document.querySelector('.number');
plus.addEventListener('click', () => {
let val = parseInt(number_el.innerText);
number_el.innerText = ++val;
});
minus.addEventListener('click', () => {
let val = parseInt(number_el.innerText);
number_el.innerText = --val;
});<button class="plus_minus">+</button>
<span class="number">1</span>
<button class="minus_plus">-</button>