Input value calculating with keyboard but not from buttons-CodePudding

I have textarea where I input from keyboard or past like 10 20 10 10 and it calculate exactly,

But when I put the values from the buttons I created on page it do not follow the flow, and do not calculate until I change the textarea with input from keyboard since it calculate when "onkeyup"

I tried to add the onkeyup to the buttons too, but than it showing value of buttons in total only but not adding in the value which is already in textarea.

Here is textarea code:

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

Javascript code:

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

Button Code:

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

value from keyboard, without pressing the button, working fine.

Added the value from buttons

CodePudding user response：

Event listener attributes like onClick and similar, work well only for the simplest of cases. In your example it'd be better to select the appropriate DOM elements in the script and attach listeners to them yourself.

<textarea id="amounts"></textarea>
<input type="button" value="8" ></input>
<input type="button" value="7" ></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();
  });
}

I changed the onkeyup event to input to only recalculate when the input changes and not for example when the user navigates through the text using arrow keys.