Why am I always getting "wrong" if I am inputting the correct answer?

Question

The idea is to ask the user for a note of the C major scale. The correct answers are ("C" || "D" || "E" || "F" || "G" || "A" ||"B"). However, regardless of the input, this basic programme always produces the same alert, the one after the "else" statement.

var answ = document.querySelector(".answer");
answ.addEventListener("click", which);

function which() {
  var give = document.querySelector(".guess");
  if (give === "C" || give === "D" || give === "E" || give === "F" || give === "G" || give === "A" || give === "B") {
    alert("Well done!");
    console.log(give);
  } else {
    alert("Wrong!");
  }
}
var answ = document.querySelector(".answer");
answ.addEventListener("click", which);

your `give` variable will be the result of `.querySelector()` which is the HTML element not the value. You will need to get the value out of the element. — dougajmcdonald, Nov 18 '20 at 13:11
`var give = document.querySelector(".guess");` why do you expect a node to equal a string? — Yury Tarabanko, Nov 18 '20 at 13:11
Does this answer your question? [How do I get the value of text input field using JavaScript?](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) — Ivar, Nov 18 '20 at 13:12

score 3 · Accepted Answer · answered Nov 18 '20 at 13:11

var give = document.querySelector(".guess");

will assign to give an HTML element (or null if no element matches).

Such an element will never be equal to "C", "D", etc. You don't show your HTML, but in case that element is an input, you'll want to access its value:

var give = document.querySelector(".guess").value;

As an aside, you can simplify the if statement to a lookup from an array:

if(["C", "D", "E", "F", "G", "A", "B"].includes(give)) { // ...

Why am I always getting "wrong" if I am inputting the correct answer?

1 Answers1