Soy un principiante en Javascript y estoy tratando de crear un programa simple para calcular el área de un círculo. Actualmente estoy atascado en cómo crear un cuadro de salida que contenga el área variable. Disculpas si es una pregunta tonta, pero agradezco cualquier tipo de ayuda.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Circle Area Calculator</title> </head> <body> <fieldset><h3><i>Enter radius of a circle:</i></h3> <form name="circleForm" onsubmit="calc()"> <label for="name">Enter a number:</label><br> <input type="number" name="radius" id="radius" placeholder="radius" required><br> <button type="submit">Calculate Area</button> <button type="reset">Reset value</button> </form> <div id="result"> <output name="result" onsubmit="result()"> </output> </div> </fieldset> </body> <script> function calc() { var radius = document.forms.circleForm.elements.namedItem("radius").value; var area = (radius**2)*3.14 var calculate; return area document.getElementById("result").innerHTML = area; } </script> </html>Agregue un detector de eventos a su botón y ejecute su función de cálculo desde allí.
El uso de event.preventDefault() evitará que el navegador envíe el formulario y actualice la página.
Establecer el innerHTML del resultado div es lo correcto, pero lo colocaría después de que su función devolviera un valor, lo que impedía que se ejecutara.
let calculate = document.getElementById('calculate'); calculate.addEventListener('click', () => { event.preventDefault(); calc(); }); function calc() { var radius = document.forms.circleForm.elements.namedItem("radius").value; var area = (radius ** 2) * 3.14 var calculate; document.getElementById("result").innerHTML = area; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Circle Area Calculator</title> </head> <body> <fieldset> <h3><i>Enter radius of a circle:</i></h3> <form name="circleForm"> <label for="name">Enter a number:</label><br> <input type="number" name="radius" id="radius" placeholder="radius" required><br> <button id="calculate">Calculate Area</button> <button type="reset">Reset value</button> </form> <div id="result"> </div> </fieldset> </body> </html>Por aquí
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Circle Area Calculator</title> <style> form { width : 20em; } legend { font-size : 1.2em; font-weight : bold; font-style : italic; padding : 0 .4em; } label { font-size : .8em; } input,output { display : block; } button { margin : .8em .4em; } </style> </head> <body> <form name="circle-form"> <fieldset> <legend>Enter radius of a circle:</legend> <label>Enter a number:</label> <input type="number" name="radius" id="radius" placeholder="radius" required><br> <button type="submit">Calculate Area</button> <button type="reset">Reset value</button> <output name="result"> </output> </fieldset> </form> <script> const circleForm = document.forms['circle-form']; circleForm.onsubmit = e => { e.preventDefault() // disable page submit ==> relaod page circleForm.result.textContent = (circleForm.radius.valueAsNumber ** 2) * Math.PI } circleForm.onreset = e => { circleForm.result.innerHTML = ' ' circleForm.radius.value = '' } </script> </body> </html>Manifestación
const circleForm = document.forms['circle-form']; circleForm.onsubmit = e => { e.preventDefault() // disable page submit ==> relaod page circleForm.result.textContent = (circleForm.radius.valueAsNumber ** 2) * Math.PI } circleForm.onreset = e => { circleForm.result.innerHTML = ' ' } form { width : 20em; } legend { font-size : 1.2em; font-weight : bold; font-style : italic; padding : 0 .4em; } label { font-size : .8em; } input,output { display : block; } button { margin : .8em .4em; } <form name="circle-form"> <fieldset> <legend>Enter radius of a circle:</legend> <label>Enter a number:</label> <input type="number" name="radius" id="radius" placeholder="radius" required><br> <button type="submit">Calculate Area</button> <button type="reset">Reset value</button> <output name="result"> </output> </fieldset> </form>