The method document.getElementById("")
is used to catch a reference to any element in a document that has a unique identifier defined for its ID attribute.
This method is one of the most common methods in DOM HTML and is used almost every time you want to manipulate or obtain information on an element of the document.
The information you want to add up are the VALUES of the inputs or
txtmedia = (txtnota1.value) + (txtnota2.value);
Only that those values, (apesar dos inputs serem do type number)
, in javascript are considered to be of the string type and therefore there will not be a sum but a concatenation.
Note the example below.
var result = document.getElementById("resultado");
var txtnota1 = document.getElementById("nota1");
var txtnota2 = document.getElementById("nota2");
function testar(){
console.log(typeof (txtnota1.value));
console.log(typeof (txtnota2.value));
txtmedia = ((txtnota1.value) + (txtnota2.value));
result.textContent = "Resultado = " + txtmedia;
}
<p><label>Digite a nota 1:</label><input type="number" id="nota1"></p>
<p><label>Digite a nota 2:</label><input type="number" id="nota2"></p>
<p><input type="button" value="adicionar" onclick="testar()">
<pre id="resultado"> </pre>
So we have to turn them into Number type to perform the arithmetic operation.
txtmedia = (Number(txtnota1.value) + Number(txtnota2.value))/2
See the example below
var result = document.getElementById("resultado");
var txtnota1 = document.getElementById("nota1");
var txtnota2 = document.getElementById("nota2");
function testar(){
console.log(typeof Number(txtnota1.value));
console.log(typeof Number(txtnota2.value));
txtmedia = (Number(txtnota1.value) + Number(txtnota2.value));
result.textContent = "Resultado = " + txtmedia;
}
<p><label>Digite a nota 1:</label><input type="number" id="nota1"></p>
<p><label>Digite a nota 2:</label><input type="number" id="nota2"></p>
<p><input type="button" value="adicionar" onclick="testar()">
<pre id="resultado"> </pre>
OBS: the arithmetic operation (the calculation of the mean) must occur within the function adicionar()
to make it work properly.
var nomes = [];
var notas1 = new Array();
var notas2 = new Array();
var media = new Array ();
var result = document.getElementById("resultado");
var txtnome = document.getElementById("inNome");
var txtnota1 = document.getElementById("nota1");
var txtnota2 = document.getElementById("nota2");
result.textContent = "\nNome\t\tnota1\t\tnota2\t\ttxtmedia";
function adicionar(){
nomes.push(txtnome.value);
notas1.push(txtnota1.value);
notas2.push(txtnota2.value);
txtmedia = (Number(txtnota1.value) + Number(txtnota2.value))/2;
media.push(txtmedia);
result.textContent += "\n" + txtnome.value + "\t\t" + txtnota1.value + "\t\t" + txtnota2.value + "\t\t" + txtmedia;
}
<p><label>Digite seu nome:</label><input type="text" id="inNome" size="20"></p>
<p><label>Digite a nota 1:</label><input type="number" id="nota1"></p>
<p><label>Digite a nota 2:</label><input type="number" id="nota2"></p>
<p><input type="button" value="adicionar" onclick="adicionar()">
<input type="button" value="media" onclick="media()"></p>
<pre id="resultado"> </pre>
already has the value in the variables, so just convert to number and calculate:
var txtmedia =(Number(textnota1) + Number(txtnota2)) / 2;
see that if the value is decimal and has comma need to convert before, if you enter a non-numerical value will also give error and so on, so validate the value before, but basically that’s what you need to do– Ricardo Pontual
---- As the colleague explained above, you have to pay attention to DOM HTML>
– HendSantana