Estoy tratando de hacer una calculadora de área y no puedo descifrar lo que me estoy perdiendo.
el campo de área no se actualiza al ingresar números en cada campo.
¿Algún consejo por favor? Me pregunto si me estoy perdiendo algo muy importante.
function calculateArea() { var form = document.getElementById("calc"); var sLength = parseFloat(form.elements["slab_length"].value); var sHeight = parseFloat(form.elements["slab_width"].value); var slabsArea = sHeight * sLength; //slabsArea = Math.round(slabsArea); //document.getElementById("slabsArea").value = slabsArea; form.elements["slabsArea"].value = slabsArea; return slabsArea; } <form id="calc"> <table> <tr> <th style="text-align: left;"><label>Slab Width (m): </label></th> <th> <div class="input-box"> <input type="text" name="slab_width" onkeypress="return isNumber(event)" onkeyup="calculateArea()" required="" class="form-control"> </div> </th> </tr> <tr> <th style="text-align: left;"><label>Slab Length (m): </label></th> <th> <div class="input-box"> <input type="text" name="slab_length" onkeypress="return isNumber(event)" onkeyup="calculateArea()" required="" class="form-control"> </div> </th> </tr> <tr> <th style="text-align: left;"><label>Total Area (m2):</label></th> <th> <div class="input-box"> <input type="text" name="slabsArea" disabled="" class="form-control"> </div> </th> </tr> </table> </form>Simplificaré esto para usted, y puede actualizar su tabla HTML según sea necesario para formatearla de la manera que desee.
Primero, no use keypress , use keyup . Esto obtendrá el valor actualizado de la entrada.
Luego, use entradas numéricas para hacer cumplir los números. Está integrado y es mucho más fácil que escribir su propio analizador numérico. Aquí hay un HTML de muestra:
Tercero, agregue ID a sus elementos. Hace que seleccionarlos sea mucho más eficiente y fácil.
Aquí hay una muestra usando entradas y detectores de eventos por brevedad:
window.addEventListener("DOMContentLoaded", () => { const userInputs = document.getElementsByClassName("userInput"); for (let x=0, input; input = userInputs[x]; x++) { input.addEventListener("keyup", (evt) => { let length = parseFloat(document.getElementById("slabLength").value); let width = parseFloat(document.getElementById("slabWidth").value); document.getElementById("slabArea").value = length * width; }) } }); <input id="slabLength" class="userInput" type="number" value="0"> <input id="slabWidth" class="userInput" type="number" value="0"> <input id="slabArea" type="number" readonly value="0">