Solo quiero que el resultado de la entrada 1 y la entrada 2 aparezca en la entrada 3 sin hacer clic en ningún botón o texto. Significa que si el usuario escribe el número 5 en la entrada 1 y el número 5 en la entrada 2, se mostrará automáticamente el resultado 10 en la entrada 3. Tengo este código:
<div class="inputs"> <div class="input-box"> <label for="exampleInputEmail1" class="details">number 1</label> <input type="number" name="num1" class="form-control" id="num1" value="<?php echo $num1?>" placeholder="0" aria-describedby="emailHelp"> </div> <div class="input-box"> <label for="exampleInputEmail1" class="details">number 2</label> <input type="number" name="num2" class="form-control" id="num2" value="<?php echo $num2?>" placeholder="0" aria-describedby="emailHelp"> </div> <div class="input-box"> <label for="exampleInputEmail1" class="details">result</label> <input type="number" name="res" class="form-control" id="res" value="<?php echo $res?>" placeholder="0" aria-describedby="emailHelp"> </div> </div>secuencia de comandos Java:
<script> function myFunction() { var x = parseInt(document.getElementById("num1").value); var y = parseInt(document.getElementById("num2").value); var z = x + y; document.getElementById("res").innerHTML = z; } </script>Hay algunos ajustes que debe hacer.
Debe llamar a su función myFunction() en el evento oninput , y debe llamarlo en los campos de entrada <input> no en el campo de resultado <input> como lo hizo.
En myFunction() debe verificar si un valor podría analizarse usando isNaN() . En el caso de una suma, probablemente sea una buena idea establecer un valor predeterminado de 0 en caso de que se haya ingresado algún valor no válido o un campo esté vacío.
function myFunction() { var x = parseInt(document.getElementById("num1").value); // set default value to 0 if parsing was not successful if (isNaN(x)) x = 0; var y = parseInt(document.getElementById("num2").value); // set default value to 0 if parsing was not successful if (isNaN(y)) y = 0; var z = x + y; document.getElementById("res").value = z; } <div class="inputs"> <div class="input-box"> <label for="exampleInputEmail1" class="details">number 1</label> <input type="number" name="num1" class="form-control" id="num1" oninput="myFunction()" value="<?php echo $num1?>" placeholder="0" aria-describedby="emailHelp" /> </div> <div class="input-box"> <label for="exampleInputEmail1" class="details">number 2</label> <input type="number" name="num2" class="form-control" id="num2" oninput="myFunction()" value="<?php echo $num2?>" placeholder="0" aria-describedby="emailHelp" /> </div> <div class="input-box"> <label for="exampleInputEmail1" class="details">result</label> <input type="number" name="res" class="form-control" id="res" value="<?php echo $res?>" placeholder="0" aria-describedby="emailHelp" /> </div> </div>