使用鍵盤而不是按鈕計算的輸入值

我有文本區域，我從鍵盤輸入或過去像 10 20 10 10 并且它計算準確，

但是，當我從我在頁面上創建的按鈕中輸入值時，它不會遵循流程，并且在我使用鍵盤輸入更改 textarea 之前不會計算，因為它會在“onkeyup”時計算

我也嘗試將 onkeyup 添加到按鈕中，但它只顯示按鈕的總值，而不是添加已經在 textarea 中的值。

這是文本區域代碼：

            <textarea name="" id="amounts" cols="115" rows="8" onkeyup="val(this); onkeydown=textchange();"></textarea>

Javascript代碼：

<script>
// new code
function val(e) {
    console.log(e.value);
}

function val(e) {
    var someText = e.value;
    var newone = document.getElementById("showinginputfromfields").innerHTML = (someText); // for on page
    var x = Math.floor(newone);

    const arrayNumbers = newone.split(' ').map(el => parseInt(el));
    const sum = arrayNumbers.reduce((sumCounter, a) => sumCounter   a, 0);

    document.getElementById("third").innerHTML = (arrayNumbers, sum);

    if (someText == "text") {
        document.getElementById("third").innerHTML = "third";
    }
} </script> 

按鈕代碼：

            <input type="button" value="8" class="operator" onClick="display('8'); onkeyup=val(this)"></input>
        <input type="button" value="7" class="operator" onClick="display('7'); onkeyup=val(this)"></input>
        <input type="button" value="6" class="operator" onClick="display('6'); onkeyup=val(this)"></input>
        <input type="button" value="5" class="operator" onClick="display('5'); onkeyup=val(this)"></input>
        <input type="button" value="4" class="operator" onClick="display('4'); onkeyup=val(this)"></input>
        <input type="button" value="3" class="operator" onClick="display('3'); onkeyup=val(this)"></input>
        <input type="button" value="2" class="operator" onClick="display('2'); onkeyup=val(this)"></input>
        <input type="button" value="1" class="operator" onClick="display('1'); onkeyup=val(this)"></input>
        <input type="button" value=" " class="operator" onClick="display(' '); onkeyup=val(this)"></input>
        <input type="button" value="0" class="operator" onClick="display('0'); onkeyup=val(this)"></input>

來自鍵盤的值，無需按下按鈕，作業正常。

從按鈕添加值

uj5u.com熱心網友回復：

類似和類似的事件偵聽器屬性onClick僅適用于最簡單的情況。在您的示例中，最好在腳本中選擇適當的 DOM 元素并自己將偵聽器附加到它們。

<textarea id="amounts"></textarea>
<input type="button" value="8" class="operator"></input>
<input type="button" value="7" class="operator"></input>
<!-- etc... -->

<div id="showinginputfromfields"></div>
<div id="third"></div>

function calculate() {
  const values = amounts.value.split(' ')
    .map(el => parseInt(el))
    .filter(el => !isNaN(el));
  const sum = values.reduce((sumCounter, a) => sumCounter   a, 0);

  document.getElementById("showinginputfromfields").innerHTML = amounts.value;
  document.getElementById("third").innerHTML = sum;
}

const amounts = document.getElementById('amounts');
amounts.addEventListener('input', calculate);

const buttons = document.getElementsByClassName('operator');
for (i = 0; i < buttons.length; i  ) {
  buttons[i].addEventListener('click', event => {
    amounts.value  = event.currentTarget.value;
    calculate();
  });
}

我將onkeyup事件更改input為僅在輸入更改時重新計算，而不是例如當用戶使用箭頭鍵瀏覽文本時重新計算。

標籤：javascript

上一篇：如何根據ID渲染陣列的特定元素onClick按鈕

下一篇：mouseenter和mouseover用于jquery中的影片