How do I display a string in this case?

Question

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.

Answer 1

<input type="text" name="fruit_answer" class="user_input" id="some-id">

document.getElementById("submit_button1").addEventListener("click",
  function (event) {
    // If you put this here... submit no longer works unless you take over and do something...
    event.preventDefault()
so...
let inputVal = document.getElementById("some-id").value
check_ans1(inputVal)
  });
// And down here...
function check_ans1(theSameInputValue) {
 // do your magic here...
}