按下箭头键会影响接受输入值的函数的结果答案

【问题标题】：Pressing arrow keys affects the result of a function that takes input values按下箭头键会影响接受输入值的函数的结果
【发布时间】：2021-09-14 18:11:55
【问题描述】：

我有一个函数，它接受一个input 值并将其汇总到一个变量中，然后每次触发“keyup”事件时都会在span 元素中显示该变量。例如我在input 中按 1，span 也显示 1。我希望这个span 只能处理数字。问题是：如果我按下任何箭头键，这个span 就会出错，并且不管input 之前的值是多少，都会对它自己求和。例如我按 3，span 也显示它，但如果我按左箭头键，span 显示 6，我按右箭头键，现在它显示 9，等等。

var inputsSum = 0;
let userQuantity = 0;
let totalPrice = document.getElementById("test2");

function calculatePrice() {
    const superChosen = document.getElementById("test");
    superChosen.addEventListener("keyup",evnt=>{
        if(evnt.target.matches("input.q-tints")) {
            userQuantity = parseInt(evnt.target.value);
            if (userQuantity >= 0) inputsSum += userQuantity;
            else if (isNaN(userQuantity)) inputsSum = 0; //Prevents actions from the backspace key
        }
        totalPrice.innerHTML = `${inputsSum},00`;
    })
}

calculatePrice();

<div class="super-chosen-color">
   <div class="chosen-color">
       <p class="text-chosen">No color chosen</p>
       <div class="info-chosen">
           <input type="text" name="" id="test" placeholder="0" class="q-tints" autocomplete="off">
           <i class="far fa-times-circle"></i>
       </div>
   </div>
</div>

<div class="total-value">
    Total
    <span>$</span>
    <span class="p-total" id="test2">
        0,00
    </span>
</div>

【问题讨论】：

标签： javascript html css function dom

【解决方案1】：

侦听input 事件而不是keyup 事件。

当 <input>、<select> 或 <textarea> 元素的值发生更改时，将触发 input 事件。^MDN
p>

var inputsSum = 0;
var totalPrice = document.querySelector('.p-total');
const superChosen = document.querySelector('input');
function calculatePrice() {
    superChosen.addEventListener("input",evnt=>{
        if(evnt.target.matches("input.q-tints")) {
            userQuantity = parseInt(evnt.target.value);
            if (userQuantity >= 0) inputsSum += userQuantity;
            else if (isNaN(userQuantity)) inputsSum = 0; //Prevents actions from the backspace key
        }
        totalPrice.innerHTML = `${inputsSum},00`;
    })
}

calculatePrice();

<div class="super-chosen-color">
   <div class="chosen-color">
       <p class="text-chosen">No color chosen</p>
       <div class="info-chosen">
           <input type="text" name="" id="" placeholder="0" class="q-tints" autocomplete="off">
           <i class="far fa-times-circle"></i>
       </div>
   </div>
</div>

<div class="total-value">
    Total
    <span>$</span>
    <span class="p-total">
        0,00
    </span>
</div>

【讨论】：