Question 236435 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why won't this conditional display both outputs?

I’m learning about arrays and was given this assignment:

"Code an array that holds the name of your favorite bands or artists. You can name the array artists.
Using the prompt() command, ask the user to name their favorite band.

If the name of the band entered is on the array, output, “That’s one of my favorites, too.” If not, output “Sorry, not a favorite of mine.”"

I can’t figure out why my code will only output one option.

Example: if I put == between choose and artists, the output is the "else" statement even if I enter a band in the array into the prompt. If it’s = it only outputs the if statement.

Here’s the code:

let artists = ["Arctic Monkeys",
                "The Black Keys",
                "Ghost",
                "Boston",
                "alt-J",
                "Fitz and the Tantrums",
                "Daft Punk",
                "Coldplay",
                "The Killers"];
let choose = prompt("What is your favorite band?");

if (choose == artists){
    alert("That's one of my favorites, too! Band Buddies!!");
} else {
    alert("Sorry, not a favorite of mine.");
}

I can’t work out what to change since it knows the two options in the conditionals, just something seems to be off with the booleans or something.

Thanks in advance for your help!

Tags:

3

Answers


  1. 0

    Prompt returns a string, but you are comparing it to an array.

    There are many solutions to this, a simple solution is to use array.includes(string).

    Includes will search the array for the string that you pass to it.

    let artists = ["Arctic Monkeys", "The Black Keys", "Ghost", "Boston", "alt-J", "Fitz and the Tantrums", "Daft Punk", "Coldplay", "The Killers"];
let choose = prompt("What is your favorite band?");

if (artists.includes(choose)) {
  document.getElementById("output").innerHTML = "That's one of my favorites, too! Band Buddies!!";
} else {
  document.getElementById("output").innerHTML = "Sorry, not a favorite of mine.";
}
    <div id="output"> </div>
    Login or Signup to reply.
  2. 0

    this happens because you’re not accesing to the values of the array.

    With your comparison "if(choose == artists)", you’re comparing a string (choose variable) and an array (artists).

    To check if the array has the value written by the user you can use:

    if( artists.includes(variable) ) {
   ... your code
} else {
   ...
}

    Try it!

    Login or Signup to reply.
  3. 0

    This solution also uses .includes() to compare strings, but with the added advice that you should handle user input differently. .includes() is case-sensitive so should the user input "the killers", your result would be false. In the example below, .toLowerCase() is used on the "artists" array as well as the user input "choose".

    let artists = ["Arctic Monkeys",
  "The Black Keys",
  "Ghost",
  "Boston",
  "alt-J",
  "Fitz and the Tantrums",
  "Daft Punk",
  "Coldplay",
  "The Killers"
];

/* Convert all strings to lower case. Or ensure that your array already has 
lower case strings beforehand. */
artists = artists.map(band => band.toLowerCase());

let choose = prompt("What is your favorite band?");

/* Reference "output" once, to cut down on unnecessary repetition. */
const output = document.getElementById("output");

/* .includes() will return true if the array has a match. Make sure to convert 
the user input "choose" to lower case. */
if (artists.includes(choose.toLowerCase())) {
  output.innerHTML =
    "That's one of my favorites, too! Band Buddies!!";
} else {
  output.innerHTML =
    "Sorry, not a favorite of mine.";
}
    <p id="output"></p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search