Calc two fields and set results in third

Question

I have a problem with the script. I am trying to count two input fields, and insert the result into the third field. But it doesn't work, and unfortunately I can't figure out what's wrong.

function sum() {
       var txtFirstNumberValue = document.querySelectorAll('#firstID > div > div > div > input').value;
       var txtSecondNumberValue = document.querySelectorAll('#second > div > div > div > input').value;
       if (txtFirstNumberValue == "")
           txtFirstNumberValue = 0;
       if (txtSecondNumberValue == "")
           txtSecondNumberValue = 0;

       var result = parseInt(txtFirstNumberValue) / parseInt(txtSecondNumberValue);
       if (!isNaN(result)) {
           document.querySelectorAll('#third > div > div > div > input').value = result;
       }
   }

<div id="firstID"><div>
<label>first</label>
<div>
    <div>
        
        <input name="drts[field_first][0]" type="number" value="" maxlength="255">
    </div>
</div>
</div></div>
<div id="second"><div>
<label>second</label>
<div>
    <div>
        <input name="drts[field_second][0]" type="number"  maxlength="255">        
    </div>
</div>
</div></div>
<div id="third"><div>
<label>third</label>
<div>
    <div>
        <input name="drts[field_third][0]" type="number" value="" maxlength="255">
        <div></div>
        
    </div>
</div>
</div></div>

Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Heretic Monkey, Oct 01 '20 at 17:59
`querySelectorAll` returns an array. Add `[0].value` to each and see what happens? Alternatively, replace `querySelectorAll` with `querySelector` — Rachael Dawn, Oct 01 '20 at 18:00
@JonathanSchmold is correct, `querySelectorAll` returns an array and you can't set the value of the whole array, just one object in the array. — PsiKai, Oct 01 '20 at 18:14
and also you do not need to check whether values are empty because the parseInt function will do it for you — svyat1s, Oct 01 '20 at 18:19

score 0 · Answer 1 · answered Oct 01 '20 at 18:18

Try like this

function sum() {
  let txtFirstNumberValue = document.querySelector('#firstID input').value;
  let txtSecondNumberValue = document.querySelector('#second input').value;

  let result = parseInt(txtFirstNumberValue) / parseInt(txtSecondNumberValue);

  if (!isNaN(result)) {
     document.querySelector('#third input').value = result;
  } else {
    document.querySelector('#third input').value = '';
  }
}

<div id="firstID"><div>
<label>first</label>
<div>
    <div>
        <input name="drts[field_first][0]" type="number" value="" maxlength="255">
    </div>
</div>
</div></div>
<div id="second"><div>
<label>second</label>
<div>
    <div>
        <input name="drts[field_second][0]" type="number"  maxlength="255">        
    </div>
</div>
</div></div>
<div id="third"><div>
<label>third</label>
<div>
    <div>
        <input name="drts[field_third][0]" type="number" value="" maxlength="255" disabled>
        <div></div>
        
    </div>
</div>
<div>
  <button id="button" onclick="sum()">Calculate</button>
</div>
</div>
</div>

score 0 · Accepted Answer · answered Oct 01 '20 at 18:40

There are a few problems here.

Are you actually calling sum? I've added a call in the example code so you can run it.
Your query selectors are not right. There isn't actually anything in the divs with the IDs you query. I've moved the input boxes into the correct places. When debugging, you should check that you are actually finding elements in your querySelectorAll call before proceeding.
querySelectorAll doesn't have a value property. You would need to iterate over each element before getting the items. Given you specifically want one item, it would be better to use something more specific like getElementById. I've kept the original querySelectorAll but changed the IDs on the divs to classes so we can have more than one result for this example. Then, I iterate over them pulling out the value to add to result. I've moved the parseInt to the running calculation otherwise it would perform a string concatenation.
Even better than the above would be to access the input directly. There's probably no point accessing a div and drilling down to the input. I've included this example to output the result.
I've removed redundant html. It's not related to the answer but try to keep your markup clean.

function sum() {
  var inputElements = document.querySelectorAll('.user-input > div > div > input');
  var result = 0;
  inputElements.forEach(element => {
    result += element.value ? parseInt(element.value) : 0
  })

  document.getElementById('third').value = result
 }
 
document.getElementById('run-button').addEventListener('click', sum)

<div class="user-input">
  <label>first</label>
  <div>
    <div>    
      <input name="drts[field_first][0]" type="number" maxlength="255">
    </div>
  </div>
<div>

<div class="user-input">
  <label>second</label>
  <div>
    <div>
      <input name="drts[field_second][0]" type="number"  maxlength="255">        
  </div>
</div>

<div>
  <label>third</label>
  <div>
    <div>
      <input id="third" name="drts[field_third][0]" type="number" value="" maxlength="255">
      <div></div>
    </div>
  </div>
<div>


<button type="button" id="run-button">Run</button>

Oh my, actually yes... I forget about call sum. Initially, I wanted the function to be executed when data is entered — Roman, Oct 01 '20 at 18:48

javascript lover · Answer 3 · 2020-10-01T19:30:38.297

const input1 = document.querySelector('#input1');
                const input2 = document.querySelector('#input2');
                const input3 =  document.querySelector('#input3');
                const storeInputs = [input1, input2];
                for(let i = 0; i < storeInputs.length; i++) {
                    storeInputs[i].addEventListener('input', function() {
                        // multiply input1 and input2 with 1 for converting there values from string to number
                        input3.value = input1.value * 1 + input2.value * 1;
                        });
                };

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <label for="input1">First Input</label>
        <input id="input1" type="number" value="0"></input>
        <label for="input2">Second Input</label>
        <input id="input2" type="number" value="0"></input>
        <label for="input3">Third Input</label>
        <input id="input3" type="number" value="0"></input>
        
    </body>
</html>

Calc two fields and set results in third

3 Answers3