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" class="form-control">
<input type="number" name="pree1" value="" id="pree1" class="form-control">
<input type="number" name="pree2" value="" id="pree2" class="form-control">
<input type="number" name="pree3" value="" id="pree3" class="form-control">
<input type="number" name="result" value="" id="result" class="result">I'm really new to this and would like someone to help me with it, thank you very much in advance.
getElementByID is a typo. The method is getElementById (small "d")
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.
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
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" class="form-control">
<input type="number" name="pree" value="" id="pree1" class="form-control">
<input type="number" name="pree" value="" id="pree2" class="form-control">
<input type="number" name="pree" value="" id="pree3" class="form-control">
<input type="number" name="result" value="" id="result" class="result">
<button onclick="addInputs()">Click</button>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>