CODEWITHSUNDEEP
javascriptdom
Kiran Racherla
Kiran Racherla

Reputation: 219

How to pass one element's value into another element's event handler in Javascript?

I'm new to learning the DOM manipulations in JS and I've come across passing mostly, a single argument to the event handler's function, like getSum(this). Let's say we have a simple addition function in the script tag, I've included those input elements inside the form, like this which is okay:

<html>
    <body>
        <form id="operands" oninput="getSum(this)">
            <input id="op1" type="number" name="op1" placeholder="op1">
            <input id="op2" type="number" name="op2" placeholder="op2">
        </form>
        <p id="output"></p>
        <script>
            function getSum(form_input){
                form_input = document.getElementById("operands").elements;
                document.getElementById("output").innerHTML = 
                    Number(form_input.namedItem("op1").value) + 
                    Number(form_input.namedItem("op2").value);
            }
        </script>
    </body>
</html>

I'm trying to rewrite so that I can eliminate the use of form element, since there are only 2 child elements (input tags) within and pass both elements values in the second one like getSum([], this) like this:

<html>
    <body>
        <input type="number" id="op1" name="op1" placeholder="op1">
        <input type="number" id="op2" name="op2" placeholder="op2" oninput="getSum(*[op1's value]*, this)">
        <p id="output"></p>
        <script>
            function getSum(a, b){
                document.getElementById("output").innerHTML = (Number(a.value) + Number(b.value));
            }
        </script>
    </body>
</html>

How can I pass the first input element's value to the getSum(a, b) function as argument a?

Upvotes: 0

Views: 2136

Answers (2)

James Hay
James Hay

Reputation: 7325

You would do generally do this inside of JavaScript rather than on the HTML.

Something like this

function getSum() {
  let op2Value = document.getElementById('op2').value;
  let op1Value = document.getElementById('op1').value;
  document.getElementById("output").innerHTML = (Number(op1Value) + Number(op2Value));
}

<input type="number" id="op1" name="op1" placeholder="op1">
<input type="number" id="op2" name="op2" placeholder="op2" oninput="getSum()">

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 371049

Attach the listener in the <script> instead, and watch for input events on the document.body. Then you can select both inputs inside the body with querySelectorAll (or whatever other method you want), get the values of each, and display their sum:

document.body.addEventListener('input', () => {
  const [aValue, bValue] = [...document.querySelectorAll('input')]
    .map(input => Number(input.value));
  document.getElementById("output").textContent = aValue + bValue;
});
<input type="number" placeholder="op1">
<input type="number" placeholder="op2">
<p id="output"></p>

While you could technically slightly tweak your original code by using getElementById in the inline handler, inline handlers should be avoided in almost all cases:

<input type="number" id="op1" name="op1" placeholder="op1" oninput="getSum(document.querySelector('#op2'), this)">
<input type="number" id="op2" name="op2" placeholder="op2" oninput="getSum(document.querySelector('#op1'), this)">

Upvotes: 1

Related Questions