javascript - sumar - Agregar dos números los concatena en lugar de calcular la suma
sumar en javascript sin concatenar (20)
¡Este código suma ambas variables! Ponlo en tu función
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = (y +z);
document.getElementById("demo").innerHTML = x;`
Estoy agregando dos números, pero no obtengo un valor correcto.
Por ejemplo, al hacer 1 + 2 devuelven 12 y no 3
¿Qué estoy haciendo mal en este código?
function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = y + z;
document.getElementById("demo").innerHTML = x;
}
<p>
Click the button to calculate x.
<button onclick="myFunction()">Try it</button>
</p>
<p>
Enter first number:
<input type="text" id="txt1" name="text1" value="1">
Enter second number:
<input type="text" id="txt2" name="text2" value="2">
</p>
<p id="demo"></p>
Aquí va su Código analizando las variables en la función.
<html>
<body>
<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Try it</button>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">
<br>Enter second number:
<input type="text" id="txt2" name="text2">
<p id="demo"></p>
<script>
function myFunction() {
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = y + z;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Responder
Debe usar el método parseInt() de parseInt() para volver a convertir las cadenas en números. En este momento son cadenas, por lo que agregar dos cadenas los concatena, por lo que obtienes "12".
En realidad son cuerdas, no números. La manera más fácil de producir un número desde una cadena es anteponerlo con + :
var x = +y + +z;
Esta es una vieja pregunta, pero lo siguiente puede ser útil en términos generales.
Primero, los campos de formulario HTML están limitados a texto . Esto se aplica especialmente a los cuadros de texto, incluso si se ha tomado la molestia de asegurarse de que el valor se parece a un número.
En segundo lugar, JavaScript, para bien o para mal, ha sobrecargado el operador
+con dos significados: agrega números y concatena cadenas. Tiene una preferencia por la concatenación, por lo que incluso una expresión como3+''4''se tratará como concatenación.En tercer lugar, JavaScript intentará cambiar los tipos dinámicamente si puede, y si es necesario. Por ejemplo,
''2''*''3''cambiará ambos tipos por números, ya que no puede multiplicar cadenas. Si uno de ellos es incompatible, obtendráNaN, no un número.
Su problema ocurre porque los datos que provienen del formulario se consideran como una cadena y, por lo tanto, + se concatenará en lugar de agregar.
Al leer datos supuestamente numéricos de un formulario, siempre debe presionarlo a través de parseInt() o parseFloat() , dependiendo de si desea un entero o un decimal.
Tenga en cuenta que ninguna función realmente convierte una cadena en un número. En su lugar, analizará la cadena de izquierda a derecha hasta que llegue a un carácter numérico inválido o hasta el final y convertirá lo que se ha aceptado. En el caso de parseFloat , eso incluye un punto decimal, pero no dos.
Cualquier cosa después del número válido simplemente se ignora. Donde fallan es si la cadena ni siquiera comienza como un número. Entonces obtendrás NaN .
Una buena técnica de propósito general para números de formularios es algo como esto:
var data=parseInt(form[''data''].value); // or parseFloat
Si está preparado para unir una cadena inválida a 0, puede usar:
var data=parseInt(form[''data''].value) || 0;
Esto no sumará el número, sino que lo concatenará:
var x = y + z;
Lo que debes hacer es:
var x = (y)+(z);
Debe usar parseInt para especificar la operación en números. Ex:
var x = parseInt(y) + parseInt(z); [final soulution, as everything us]
Hola amigos es muy simple
<html>
<body>
<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Try it</button>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">Enter second number:
<input type="text" id="txt2" name="text2">
<p id="demo"></p>
<script>
function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = +y + +z;
document.getElementById("demo").innerHTML = x;
}
</script>
Le falta la conversión de tipo durante el paso de adición ...
var x = y + z; debe ser var x = parseInt(y) + parseInt(z);
<!DOCTYPE html>
<html>
<body>
<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Try it</button>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">Enter second number:
<input type="text" id="txt2" name="text2">
<p id="demo"></p>
<script>
function myFunction()
{
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = parseInt(y) + parseInt(z);
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Puedes hacer una comprobación previa con expresión regular cuando se trata de números como
function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
if((x.search(/[^0-9]/g) != -1)&&(y.search(/[^0-9]/g) != -1))
var x = Number(y)+ Number(z);
else
alert("invalid values....");
document.getElementById("demo").innerHTML = x;
}
Sencillo
var result = parseInt("1") + parseInt("2");
console.log(result ); // Outputs 3
Solo uso Number() :
var i=2;
var j=3;
var k = Number(i) + Number(j); // 5
También puede escribir: var z = x - -y; Y obtienes la respuesta correcta.
<body>
<input type="text" id="number1" name="">
<input type="text" id="number2" name="">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, y ;
x = document.getElementById(''number1'').value;
y = document.getElementById(''number2'').value;
var z = x - -y ;
document.getElementById(''demo'').innerHTML = z;
}
</script>
</body>
Una solución alternativa, simplemente compartir :):
var result=eval(num1)+eval(num2);
Use parseInt(...) pero asegúrese de especificar un valor de raíz; de lo contrario, se encontrará con varios errores (si la cadena comienza con "0", la raíz es octal / 8, etc.).
var x = parseInt(stringValueX, 10);
var y = parseInt(stringValueY, 10);
alert(x + y);
¡Espero que esto ayude!
Use parseFloat convertirá string a number incluyendo valores decimales.
function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = parseFloat(y) + parseFloat(z);
document.getElementById("demo").innerHTML = x;
}
<p>
Click the button to calculate x.
<button onclick="myFunction()">Try it</button>
</p>
<p>
Enter first number:
<input type="text" id="txt1" name="text1" value="1">
Enter second number:
<input type="text" id="txt2" name="text2" value="2">
</p>
<p id="demo"></p>
jefe simplemente agrega un método de conversión de tipo simple ya que la entrada se toma en el uso de texto siguiente
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = y + z;
prueba esto
<!DOCTYPE html>
<html>
<body>
<p> Add Section </p>
<label>First No :</label>
<input id="txt1" type="text"/><br />
<label>Second No :</label>
<input id="txt2" type="text"/><br />
<input type="button" name="Add" value="Add" onclick="addTwoNumber()"/>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = Date();
}
function addTwoNumber(){
var a = document.getElementById("txt1").value;
var b = document.getElementById("txt2").value;
var x = Number(a) + Number(b);
document.getElementById("demo").innerHTML = "Add Value: " + x;
}
</script>
</body>
</html>
si tenemos dos campos de entrada, obtenemos los valores de los campos de entrada y luego los agregamos usando javascript.
$(''input[name="yourname"]'').keyup(function(event) {
/* Act on the event */
var value1 = $(this).val();
var value2 = $(''input[name="secondName"]'').val();
var roundofa = +value2+ +value1;
$(''input[name="total"]'').val(addition);
});
<head>
<script type="text/javascript">
function addition()
{
var a = parseInt(form.input1.value);
var b = parseInt(form.input2.value);
var c = a+b
document.write(c);
}
</script>
</head>
<body>
<form name="form" method="GET">
<input type="text" name="input1" value=20><br>
<input type="text" name="input2" value=10><br>
<input type="button" value="ADD" onclick="addition()">
</form>
</body>
</html>
<input type="text" name="num1" id="num1" onkeyup="sum()">
<input type="text" name="num2" id="num2" onkeyup="sum()">
<input type="text" name="num2" id="result">
<script>
function sum()
{
var number1 = document.getElementById(''num1'').value;
var number2 = document.getElementById(''num2'').value;
if (number1 == '''') {
number1 = 0
var num3 = parseInt(number1) + parseInt(number2);
document.getElementById(''result'').value = num3;
}
else if(number2 == '''')
{
number2 = 0;
var num3 = parseInt(number1) + parseInt(number2);
document.getElementById(''result'').value = num3;
}
else
{
var num3 = parseInt(number1) + parseInt(number2);
document.getElementById(''result'').value = num3;
}
}
</script>