如何将输入值添加到计数器值？

Question

I'm trying to have a counter that can respond to input values and add it to displayed count but continue to count by 1. The count starts at 0. I have the counter working with buttons, but not with the added input.

 let decreaseBtn = document.getElementById("buttonDecrease"); let increaseBtn = document.getElementById("buttonIncrease"); let counter = document.getElementById("counter"); let inputValue = document.getElementById("quantity").inputValue let count = 0; decreaseBtn.addEventListener("click", () => { count--; counter.innerHTML = count; counterStyle(); }); increaseBtn.addEventListener("click", () => { count++; counter.innerHTML = count; counterStyle(); }); function counterStyle() { if (count < 0) { counter.classList.add("negative"); } else if (count > 0) { counter.classList.add("positive"); } else { counter.classList.remove("negative"); counter.classList.remove("positive"); } } function addInput() { console.log(inputValue) } addInput();

 <h1 id="counter">0</h1> <div id="button__wrapper"> <button id="buttonDecrease">-</button> <input type="text" id="quantity" value="1"> <button id="buttonIncrease">+</button> </div>

Answer 1

Yuo need to get the value of the input in your event listener functions, not when the script starts. Then use that instead of just incrementing and decrementing.

The property to get the value of an input is .value , not .inputValue .

 let decreaseBtn = document.getElementById("buttonDecrease"); let increaseBtn = document.getElementById("buttonIncrease"); let counter = document.getElementById("counter"); let quantity = document.getElementById("quantity"); let count = 0; decreaseBtn.addEventListener("click", () => { count -= addInput(); counter.innerHTML = count; counterStyle(); }); increaseBtn.addEventListener("click", () => { count += addInput(); counter.innerHTML = count; counterStyle(); }); function counterStyle() { if (count < 0) { counter.classList.add("negative"); counter.classList.remove("positive"); } else if (count > 0) { counter.classList.add("positive"); counter.classList.remove("negative"); } else { counter.classList.remove("negative"); counter.classList.remove("positive"); } } function addInput() { return parseInt(quantity.value); }

 .positive { background-color: green; } .negative { background-color: red; }

 <h1 id="counter">0</h1> <div id="button__wrapper"> <button id="buttonDecrease">-</button> <input type="text" id="quantity" value="1"> <button id="buttonIncrease">+</button> </div>

Answer 2

You have increment and decrement operators when you handle the click event. This is why it is always just adding or subtracting by 1, and not by the value of the input. You should be adding the value of the input element, after using parseInt() to make it into an add-able integer.

Your code that I'm changing:

count--;

What I'm changing it to...

count -= parseInt(document.getElementById('quantity').value, 10);

And I'm doing the same for count++ .

In addition , it seems your counterStyles() function isn't removing classes appropriately, and sometimes you'll have a red background with positive integers. I fixed this up by adding the needed removeClass() calls here.

The rest of the code is the same...

 let decreaseBtn = document.getElementById("buttonDecrease"); let increaseBtn = document.getElementById("buttonIncrease"); let counter = document.getElementById("counter"); let inputValue = document.getElementById("quantity").inputValue let count = 0; decreaseBtn.addEventListener("click", () => { count -= parseInt(document.getElementById('quantity').value, 10); counter.innerHTML = count; counterStyle(); }); increaseBtn.addEventListener("click", () => { count += parseInt(document.getElementById('quantity').value, 10); counter.innerHTML = count; counterStyle(); }); function counterStyle() { if (count < 0) { counter.classList.add("negative"); counter.classList.remove("positive"); } else if (count > 0) { counter.classList.add("positive"); counter.classList.remove("negative"); } else { counter.classList.remove("negative"); counter.classList.remove("positive"); } } function addInput() { console.log(inputValue) } addInput();

 .positive { background-color: green; } .negative { background-color: red; }

 <h1 id="counter">0</h1> <div id="button__wrapper"> <button id="buttonDecrease">-</button> <input type="text" id="quantity" value="1"> <button id="buttonIncrease">+</button> </div>