Así que parece que tengo mucho este problema con mi salida que no se muestra en el html, e incluso seguir los programas anteriores parece no darme ninguna idea de por qué nunca se muestran. Pero tengo un programa simple de cálculo de propinas en javascript, quiero que el monto de la propina y la propina por persona aparezcan debajo del formulario en la página html, pero cada vez que presiono el botón Enviar, no aparece nada. Probé diferentes detectores de eventos (ambos visibles en el código) uno en el botón y otro en el javascript pero no hizo nada. No estoy seguro de si se debe al "" alrededor del envío en html y al '' alrededor del envío en javascript, o incluso si se supone que debo usar '' alrededor de las identificaciones en el html, vi un código diferente usando cualquiera más o menos no estaba seguro de cuál usar realmente, así que opté por "" alrededor de los identificadores en el archivo html.
HTML (nombre de archivo pro3):
<!DOCTYPE html> <html> <head> <title>Project 3</title> </head> <body> <script src = "pro3java.js"></script> <h1>TIP CALUCULATOR</h1> <form name = 'tipForm'> <p>Enter bill amount:</p> <input type="number"name="billAmt"> <br> <p>Enter tip percentage:</p> <input type="number" name="tipPerc"> <br> <p>Enter number of people:</p> <input type="number" name="people"> <br> <br> <button type="submit" onclick="result()">Calculate</button> <br> </form> <div id = 'tipResult'></div> </body> </html>JAVASCRIPT (nombre de archivo pro3java:
const form = document.forms.tipForm; const output = document.getElementById('#tipResult'); form.addEventListener('submit', result); //calc let tip = parseInt(form.bill.value) * (parseInt(form.tipPerc.value) / 100); let amount = (parseInt(form.bill.value) + parseInt(tip)) / form.people.value; let total = amount.toFixed(2); function result(e){ tipResult.textContent = `Your tip is $${tip}!`; tipResult.textContent = `Everyone will pay $${total}!`; } //result endHabía algunas cosas mal aquí. Tenía la variable incorrecta para la factura (billAmt) y tenía un detector de eventos duplicado con un evento en línea (onsubmit="result()"). Finalmente, necesitaba mover sus cálculos para que estuvieran dentro de la función result(). De lo contrario, esos cálculos solo ocurren cuando se carga la página (cuando están todos vacíos). Arreglé esos 3 errores y funciona. Además, agregué un 'e.preventDefault()' (e es la abreviatura de event) en el oyente de envío del formulario. Eso evitará que el formulario tenga su comportamiento predeterminado, que es actualizar la página.
const form = document.forms.tipForm; const output = document.getElementById('#tipResult'); form.addEventListener('submit', result); function result(e) { e.preventDefault(); // stop form from refreshing the page //calc let tip = parseInt(form.billAmt.value) * (parseInt(form.tipPerc.value) / 100); let amount = (parseInt(form.billAmt.value) + parseInt(tip)) / form.people.value; let total = amount.toFixed(2); tipResult.textContent = `Your tip is $${tip}!`; tipResult.textContent = `Everyone will pay $${total}!`; return false } //result end <h1>TIP CALUCULATOR</h1> <form name='tipForm'> <p>Enter bill amount:</p> <input type="number" name="billAmt"><br> <p>Enter tip percentage:</p> <input type="number" name="tipPerc"><br> <p>Enter number of people:</p> <input type="number" name="people"><br> <button type="submit">Calculate</button> <br> </form> <div id='tipResult'></div>