Quiero ver si puedo mostrar una cadena, sin embargo, parece que no funciona según lo previsto. ¿Estoy declarando la cadena incorrecta? ¿O se supone que debo usar algo más?

Aquí está el HTML de mi código:

 <div class="modal" id="fruit"> <!-- Modal content --> <div class="modal_content"> <span class="close">&times;</span> <p>what fruit starts with an A and ends with a E, and grows on trees?</p> <form name="fruit_form"> <label>Type your answer here:</label> <input type="text" name="fruit_answer" class="user_input"> <input type="submit" onclick="check_ans1()" id="submit_button1"> <p id="show_user_input"></p> </form> </div> </div> <!-- the popup for getting the answer incorrect--> <div class="check_ans_modal" id="incorrect_popup"> <div class="wrong_ans"> <h1>WRONG!!!!</h1> <p>the answer was:</p> <div class="correct_ans_text"></div> </div> </div>

Aquí está el javascript de mi código:

 //stop webpage from reloading when press submit button document.getElementById("submit_button1").addEventListener("click", function (event) { event.preventDefault() }); // POPUP when user gets question incorrect function display_incorrect(a) { document.getElementById("incorrect_popup").style.display = "block"; document.querySelector(".correct_ans_text").innerHTML = a; } let fruit_ans= "apple"; function check_ans1() { let x = document.forms["fruit_form"]["fruit_answer"].value; if (x == "") { alert("Answer must be filled out!!!"); } else if (x == fruit_ans) { display_correct(); } else { alert("you entered: " + x); display_incorrect(fruit_ans); } }

Desafortunadamente, no estoy seguro de por qué el botón Enviar no reacciona en absoluto cuando lo presiono. Pero cuando dejo el cuadro de texto en blanco y lo envío, la alerta funciona. Entonces resulta que son solo las declaraciones else if y else las que no funcionan.