Estoy tratando de construir una calculadora de calorías usando HTML y JS y actualmente estoy luchando para mostrar el resultado en la pantalla (o a través de console.log). Sé que estoy haciendo algo muy básico bastante mal, pero actualmente no puedo identificar qué es eso.
Aquí está mi código HTML y JS a continuación:
document.getElementById("bmrForm").addEventListener("submit", calcBMR); function calcBMR(gender, weightKG, heightCM, age) { // Calculate BMR if (gender = 'male') { let BMR = 10 * weightKG + 6.25 * heightCM - 5 * age + 5; } else { let BMR = 10 * weightKG + 6.25 * heightCM - 5 * age - 161; } console.log(BMR); } <body> <script src="./script.js"></script> <section> <form id="bmrForm" onsubmit="calcBMR()"> <input type="text" id="gender" placeholder="Male or female?"> <input type="number" id="weight" placeholder="Weight in KG"> <input type="number" id="height" placeholder="Height in CM"> <input type="number" id="age" placeholder="How old are you?"> <button type="submit" id="submitBtn">Do Magic!</button> </form> <p id="output">0</p> </section> </body>Pruebe este, casi ha terminado, simplemente obteniendo valor de la entrada cuando el usuario hace clic en el botón.
Pero debo notar que el botón de submit redirigirá inmediatamente a una nueva página, debe usar click en su lugar si desea mostrarse el resultado.
document.getElementById("submitBtn").addEventListener("click",function(){ let gen = document.querySelector('#gender').value let weight = document.querySelector('#weight').value let height = document.querySelector('#height').value let ages = document.querySelector('#age').value calcBMR(gen,weight,height,ages) }) function calcBMR(gender, weightKG, heightCM, age) { let BMR // Calculate BMR if (gender = 'male') { BMR = 10 * weightKG + 6.25 * heightCM - 5 * age + 5; } else { BMR = 10 * weightKG + 6.25 * heightCM - 5 * age - 161; } document.querySelector('#output').textContent = BMR; } <body> <script src="./script.js"></script> <section> <form id="bmrForm"> <input type="text" id="gender" placeholder="Male or female?"> <input type="number" id="weight" placeholder="Weight in KG"> <input type="number" id="height" placeholder="Height in CM"> <input type="number" id="age" placeholder="How old are you?"> <button id="submitBtn">Do Magic!</button> </form> <p id="output">0</p> </section> </body>Puede eliminar la línea document.getElementById("bmrForm").addEventListener("submit", calcBMR);
Puede pasar el evento a onsubmit - <form id="bmrForm" onsubmit="calcBMR(event)">
function calcBMR(e) { e.preventDefault(); var elements = document.getElementById("bmrForm").elements; // logic to get all form elements var obj ={}; for(var i = 0 ; i < elements.length ; i++){ var item = elements.item(i); obj[item.id] = item.value; } const {gender, weight, height, age } = obj; //Get values from obj // Calculate BMR let BMR = ''; if (gender === 'male') { BMR = 10 * weight + 6.25 * height - 5 * age + 5; } else { BMR = 10 * weight + 6.25 * height - 5 * age - 161; } console.log(BMR); }Es necesario modificar varias cosas para lograr el resultado deseado.
document.getElementById("bmrForm").addEventListener("submit", calcBMR); no es necesario porque podemos pasar una función directamente al atributo onsubmit del elemento de form .gender , weightKG , heightCM y age no se pasan automáticamente a la función calcBMR . Los valores deben recuperarse del documento.BMR debe definirse sobre el bloque if/else debido al alcance .return al atributo onsubmit para que el formulario no se envíe y actualice la página. Alternativamente, si el efecto deseado es actualizar el texto en la pantalla, un elemento de button con un controlador de evento de click agregado puede ser una mejor opción que un form con un controlador de submit .== o === en JavaScript. Por lo tanto, la parte gender = 'male' debe cambiarse a gender === 'male' .document.getElementById("output").textContent = BMR textContentA continuación se muestra el código con los cambios enumerados anteriormente.
function calcBMR() { let gender = document.getElementById("gender").value; let weightKG = document.getElementById("weight").value; let heightCM = document.getElementById("height").value; let age = document.getElementById("age").value; let BMR; // Calculate BMR if (gender === 'male') { BMR = 10 * weightKG + 6.25 * heightCM - 5 * age + 5; } else { BMR = 10 * weightKG + 6.25 * heightCM - 5 * age - 161; } console.log(BMR); document.getElementById("output").textContent = BMR; return false; } <body> <script src="./script.js"></script> <section> <form id="bmrForm" onsubmit="return calcBMR()"> <input type="text" id="gender" placeholder="Male or female?"> <input type="number" id="weight" placeholder="Weight in KG"> <input type="number" id="height" placeholder="Height in CM"> <input type="number" id="age" placeholder="How old are you?"> <button type="submit" id="submitBtn">Do Magic!</button> </form> <p id="output">0</p> </section>El BMR está en el árbol if , debe estar en el padre.
¡Prueba esto!
document.getElementById("bmrForm").addEventListener("submit", calcBMR); const output = document.getElementById('output'); function calcBMR(event) { // Get the [gender, weightKG, heightCM, age] value let gender = document.getElementById('gender').value; let weightKG = document.getElementById('weight').value; let heightCM = document.getElementById('height').value; let age = document.getElementById('age').value; // Set default BMR to 0 let BMR = 0; // Calculate BMR if (gender = 'male') { BMR = 10 * weightKG + 6.25 * heightCM - 5 * age + 5; } else { BMR = 10 * weightKG + 6.25 * heightCM - 5 * age - 161; } console.log(BMR); output.innerText = BMR; // Cancel form submit event.preventDefault(); return; } <body> <script src="./script.js"></script> <section> <form id="bmrForm"> <input type="text" id="gender" placeholder="Male or female?"> <input type="number" id="weight" placeholder="Weight in KG"> <input type="number" id="height" placeholder="Height in CM"> <input type="number" id="age" placeholder="How old are you?"> <button type="submit" id="submitBtn">Do Magic!</button> </form> <p id="output">0</p> </section> </body>Usé un selector en lugar del campo de texto para el género.
form.elements para obtener los valores del formulario.
event.preventDefault(); para evitar que el formulario se redirija al enviar.
// your form var form = document.getElementById("formId"); var DoMagic = function(event) { event.preventDefault(); var elements = form.elements; if (elements["gender"].value == "male") { var result = 10 * elements["weight"].value + 6.25 * elements["height"].value - 5 * elements["age"].value + 5; } else { var result = 10 * elements["weight"].value + 6.25 * elements["height"].value - 5 * elements["age"].value - 161; } document.getElementById("result").textContent = "Result: " + result; } // attach event listener form.addEventListener("submit", DoMagic, true); <form id = "formId"> <label>Gender</label> <select name="gender"> <option value="male">Male</option> <option value="female">Female</option> </select> <br> <label>Weight (kg)</label> <input name="weight" type="number"> <br> <label>Height (cm)</label> <input name="height" type="number"> <br> <label>Age (years)</label> <input name="age" type="number"> <br> <input type="submit" value="Do Magic!"> </form> <span id='result'> </span>Codigo de trabajo
Hay algunas fallas fundamentales en su código. Habiendo dicho eso, estudiar esto realmente te dará una comprensión adecuada de Javascript.
HTML:
<body> <section> <form id="bmrForm"> <input type="text" id="gender" placeholder="Male or female?" name="gender"> <input type="number" id="weight" placeholder="Weight in KG" name="weight"> <input type="number" id="height" placeholder="Height in CM" name="height"> <input type="number" id="age" placeholder="How old are you?" name="age"> <button type="submit" id="submitBtn">Do Magic!</button> </form> <p id="output">0</p> </section> </body>JavaScript:
document.getElementById("bmrForm").addEventListener("submit", calcBMR); const output = document.querySelector('#output') function calcBMR(e) { e.preventDefault(); output.innerText = '' const formData = new FormData(e.target) const { age, gender, height, weight} = Object.fromEntries(formData); let BMR = 0 // Calculate BMR if (gender === 'male') { BMR = 10 * parseInt(weight) + 6.25 * parseInt(height) - 5 * parseInt(age) + 5; } else { BMR = 10 * parseInt(weight) + 6.25 * parseInt(height) - 5 * parseInt(age) - 161; } output.innerText = BMR }