I have the follow code:

I want to do a plus with all inputs, and I'm new in this process, but i try.

var num1 = document.getElementByID('pree');
var num2 = document.getElementByID('pree1');
var num3 = document.getElementByID('pree2');
var num4 = document.getElementByID('pree3');

var result = document.getElementByID('num1   num2  num3  num4');

<input type="number" name="pree" value="" id="pree" >
<input type="number" name="pree1" value="" id="pree1" >
<input type="number" name="pree2" value="" id="pree2" >
<input type="number" name="pree3" value="" id="pree3" >
<input type="number" name="result" value="" id="result" >

I'm really new to this and would like someone to help me with it, thank you very much in advance.

CodePudding user response：

1. getElementByID is a typo. The method is getElementById (small "d")

2. Even if you corrected the typo var result = document.getElementById('num1 num2 num3 num4'); won't do anything because 'num1 num2 num3 num4' is not the id of any element. You want to assign the total of adding the values of those inputs together to the value attribute of your result element.

3. You're not checking for any changes on those inputs for you to be able to create the total. For that you'll need a listener.

Here's a slightly more modern approach. It uses event delegation to attach a listener to a containing element to catch change events from the inputs as they "bubble up" the DOM. That listener calls the handleChange function.

The handleChange function resets the total, iterates over all the inputs, and adds their value to the total. Then the value of the result is set.

// Cache the elements
const container = document.querySelector('#container');
const inputs = document.querySelectorAll('input[type="number"]');
const result = document.querySelector('#result');

// Add a listener to the container
container.addEventListener('change', handleChange, false);

// Reset the total, iterate over the input elements,
// and add their value to the total, coercing the string
// to a number first. Finally add that total to the
// value of the `result` element
function handleChange() {
  let total = 0;
  inputs.forEach(input => total  = Number(input.value));
  result.value = total;
}

<div id="container">
  <input type="number" name="pree">
  <input type="number" name="pree1">
  <input type="number" name="pree2">
  <input type="number" name="pree3">
  <br />
  Result: <input id="result">
</div>

Additional documentation

• querySelector

• querySelectorAll

• forEach

CodePudding user response：

I've added a button to control when this fires, but you can change the name attribute to the same value on all of them, so that you can retrieve them as an array to loop through:

function addInputs() {
  var arr = document.getElementsByName('pree');
  var sum = 0;
  for (var i = 0; i < arr.length; i  ) {
    if (parseInt(arr[i].value))
      sum  = parseInt(arr[i].value);
  }
  var resultInput = document.getElementById('result');
  resultInput.value = sum;
}

<input type="number" name="pree" value="" id="pree" >
<input type="number" name="pree" value="" id="pree1" >
<input type="number" name="pree" value="" id="pree2" >
<input type="number" name="pree" value="" id="pree3" >
<input type="number" name="result" value="" id="result" >

<button onclick="addInputs()">Click</button>

CodePudding user response：

First of all, if you get values from input that would always from type string. if you like to calculate then you have parse to int.

working example

const btn = document.querySelector('button');
btn.addEventListener('click', () => {
  var num1= document.getElementById('pree').value;
  var num2= document.getElementById('pree1').value;
  var num3= document.getElementById('pree2').value;
  var num4= document.getElementById('pree3').value;
  let sum = parseInt(num1)   parseInt(num3)   parseInt(num3)   parseInt(num4)
  document.getElementById("result").value = sum;
  console.log(sum)

})

<input  id="pree" value="1">
<input  id="pree1" value="1">
<input  id="pree2" value="1">
<input  id="pree3" value="1">
<br/>
<button>Sum</button>
<br/>
<input  id="result" value="" readonly>

CodePudding user response：

Variable should be written without quote and first get the value of input. So , the code will be.

<script>

    var num1= document.getElementById('pree').value;
    var num2= document.getElementById('pree1').value;
    var num3= document.getElementById('pree2').value;
    var num4= document.getElementById('pree3').value;
    
document.getElementById("result").value(num1   num3   num3   num4);

</script>