Problem with JS script

HTML

<form autocomplete="off" method="post" action="">
    <input autocomplete="false" name="hidden" type="text" style="display:none;">
    <input type = "text" id = "answer">
    </form>
    <button id = "submit" onclick = "checker()">Submit</button>
    <span id = "trial"></span>

JAVASCRIPT

function checker() {
  if (document.getElementById("answer").innerHTML == "Cantaloupe") {
    document.getElementById("trial").innerHTML = "Good Job!";
  } else if (document.getElementById("answer").innerHTML == "Telephone") {
    document.getElementById("trial").innerHTML = "Congratulations!";
  } else if (document.getElementById("answer").innerHTML == "Boardroom") {
    document.getElementById("trial").innerHTML = "Well Done!";
  } else if (document.getElementById("answer").innerHTML == "Mathematics") {
    document.getElementById("trial").innerHTML = "That's right!";
  } else if (document.getElementById("answer").innerHTML == "Management") {
    document.getElementById("trial").innerHTML = "Correct Answer";
  } else if (document.getElementById("answer").innerHTML == "Printer") {
    document.getElementById("trial").innerHTML = "You got that right!";
  } else {
    document.getElementById("trial").innerHTML = "Wrong. Try Again";
  }
}

for some reason when i run my code with the correct input, it comes “wrong try again”.
please help

I’ve moved your reply to a new thread: please start new threads if you want help rather than hijacking other threads.

I’ve also edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

Because inputs don’t have an innerHtml. They have a value.

Instead of querying the DOM in every single if statement you should cache the elements you are working with in variables. Otherwise JS has to access the DOM in every statement, it’s also way more code and harder to read.

Things I noticed:

  1. Your submit button is outside of the form.
  2. To access the text inside an input you use value, not innerHTML.
  3. For readabilty, use a switch instead of several if/else if.
  4. Unless you are working with React, remove the onclick inside the DOM. Better to handle event through listeners in JS.
// Add listener to the submit button to fire checker when clicked.
document.getElementById("submit").addEventListener('click', checker);

function checker(e) {
  // Prevents the page from refreshing when submitting the form.
  e.preventDefault();

  // Cache the DOM-elements and store them in local variables
  const answer = document.getElementById("answer");
  const trial = document.getElementById("trial");

  // Switch case based on the value in the input.
  switch(answer.value){
  	  case "Cantaloupe":
        trial.innerHTML = "Good Job!";
        break;
      case "Telephone":
        trial.innerHTML = "Congratulations!";
        break;
      case "Boardroom":
        trial.innerHTML = "Well Done!";
        break;
      case "Mathematics" :
        trial.innerHTML = "That's right!";
        break;
      case "Management":
        trial.innerHTML = "Correct Answer";
        break;
      case "Printer":
        trial.innerHTML = "You got that right!";
        break;
      default:
        trial.innerHTML = "Wrong. Try Again";
        break;
  }
}

Input is selfclosing tag, so it can’t have any innerHTML.

<input type="text" value="23" id="age"> // No innerHTML here

<button>This one has an innerHTML</button>

Wouldn’t the selectors have to be outside the function for them to be cached? I mean it will re-query them on every click. Right?

Thats correct, cache was probably a wrong term here. Store the selectors in local variables that can be used in the func, rather than requery the dom twice in each if statement.

1 Like