Estoy tratando de usar una etiqueta de formulario con document.getElementById, pero tengo problemas para que Javascript recupere los valores de mis entradas. O tal vez algo más está completamente mal y yo soy un estúpido.
HTML:
<form onsubmit="testMonth();"> <label>Month: <input id="month" list="months" name="Months"></label> <datalist id="months"> <option value="May"> <option value="June"> <option value="July"> <option value="August"> <option value="September"> <option value="October"> </datalist> <label for="age">Age:</label> <input type="text" id="age" name="age"> <label for="coupon">Coupon Code:</label> <input type="text" id="coupon" name="coupon"> <input type="submit" name="submit"> </form>JS:
function testMonth() { var month = document.getElememtById('month').value; if(month == July || month == August) { document.getElementById('price').innerHTML = "$150"; } else { if(month == null) { alert('Please fill out the month field'); } else { testAge(); } } } function testAge() { var age = document.getElementById('age').value; if(age == null) { alert('Please fill out the age field'); } else { if(age < 5 || age > 90) { alert('Visiters must be between the ages of 5 and 90'); } else { if (age == 10 || age == 90) { testCoupon(); } else { if (age < 18 || age == 18) { document.getElementById('price').innerHTML = "$50"; } else { document.getElementById('price').innerHTML = "$150"; } } } } } function testCoupon() { var coupon = document.getElementById('coupon').value; if (coupon == "YEET") { document.getElementById('price').innerHTML = "$0"; } else { if (document.getElementById('age').value == 10) { document.getElementById('price').innerHTML = "$50"; } else { document.getElementById('price').innerHTML = "$150"; } } }Cuando completo los campos en el sitio web y presiono sumbit, el sitio simplemente se actualiza, lo que me hace pensar que la sintaxis del formulario/botón de envío es incorrecta. Sin embargo, el problema también podría ser que he escrito mal el JS y no está recuperando el valor de las entradas del formulario.
Encontré 3 errores en tu código. Primero debes usar
event.preventDefault() como segundo en su primera declaración if dentro de la función testMonth , está verificando julio y agosto, pero no tiene esas variables. Debe verificar como cadena o crear una variable para ellos y el último tiene un error tipográfico en getElementById nuevamente en la primera parte de la función testMonth
function testMonth() { event.preventDefault() var month = document.getElementById('month').value; if(month == 'July' || month == 'August') { document.getElementById('price').innerHTML = "$150"; } else { if(month == null) { alert('Please fill out the month field'); } else { testAge(); } } } function testAge() { var age = document.getElementById('age').value; if(age == null) { alert('Please fill out the age field'); } else { if(age < 5 || age > 90) { alert('Visiters must be between the ages of 5 and 90'); } else { if (age == 10 || age == 90) { testCoupon(); } else { if (age < 18 || age == 18) { document.getElementById('price').innerHTML = "$50"; } else { document.getElementById('price').innerHTML = "$150"; } } } } } function testCoupon() { var coupon = document.getElementById('coupon').value; if (coupon == "YEET") { document.getElementById('price').innerHTML = "$0"; } else { if (document.getElementById('age').value == 10) { document.getElementById('price').innerHTML = "$50"; } else { document.getElementById('price').innerHTML = "$150"; } } } <form onsubmit="testMonth();"> <label>Month: <input id="month" list="months" name="Months"></label> <datalist id="months"> <option value="May"> <option value="June"> <option value="July"> <option value="August"> <option value="September"> <option value="October"> </datalist> <label for="age">Age:</label> <input type="text" id="age" name="age"> <label for="coupon">Coupon Code:</label> <input type="text" id="coupon" name="coupon"> <input type="text" id="price" name="price"> <input type="submit" name="submit"> </form>