'How do I display a string in this case?

I want to see if I can display a string, however it seems that it doesn't function as intended. Am I declaring the string wrong? Or am I supposed to use something else?

Here is the HTML of my code:

  <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>

Here is the javascript of my code:

//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);
  }
}

Unfortunately, Im not sure why the submit button does not react at all when I press it. But when I leave the textbox blank and submit it, the alert works. So turns out its just the else if and the else statements that are not working.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source