Loop through an array of songs using JS. If song is in the array, alert “Yes”. If it's not, alert “No”

Question

I'm trying to display a list of songs my band plays on a new website. The user enters a song name (in the input tag called "liveSearchBox") and clicks the "findSong" button. If we play the song, I want to alert "Yes, we play it!". If we don't, I want to alert "Sorry, we don't play it." I've been trying for hours to figure out the solution, but am not advanced enough yet. Thanks for any help!

Here's my HTML code:

<div class="live-search-list">

    <input type="text" id="liveSearchBox" placeholder=" Search Songs or Artist">
    <button id="findSong"> Click to Find!</button>
    <ul id="songList">
        <li class="song"> Margaritaville</li>
        <li class="song"> Boys of Summer</li>
        <li class="song"> Somebody Like You</li>
    </ul>

</div>

And here's my Javascript:

var songList = ["Margaritaville","Boys of Summer","Somebody Like You"];
var findButton = document.getElementById("findSong");
var songQuery = document.getElementById("liveSearchBox");
var songListItem = document.getElementsByClassName("song");

findButton.onclick = function(){
   for (var i = 0; i<songList.length; i++){
       if (songQuery.value === songList[i]){
           alert('Yes, we play "' +  songQuery.value + '"!');
       }  else {
             i++;
          }

  } 

};

Answer 1

Use indexOf :

if (songList.indexOf(songQuery.value) != -1)
    alert('yes');
else
    alert('no');

Answer 2

Using indexOf would work, but if you want a solution that works in any browser, here is the fastest way to do that:

function isInArray(array, item) {
    for (i = 0; i < array.length; i++)
        if (array[i] === item)
            return true;
    return false;
}

findButton.onclick = function() {
    if (isInArray(songList, songQuery.value))
        alert('Yes, we play "' + songQuery.value + '"!');
    else
        alert('Sorry, we don\'t play "' + songQuery.value + '".');
};

Answer 3

findButton.onclick = function(){
    var msg = !!~songList.indexOf(songQuery.value) ? 'Yes, we play "' +  songQuery.value + '"!' : 'No we do not play this song.';
    alert(msg);
}

Maybe this will be more understandable for you:

findButton.onclick = function(){
    var msg = songList.includes(songQuery.value) ? 'Yes, we play "' +  songQuery.value + '"!' : 'No we do not play this song.';
    alert(msg);
}

Or this:

findButton.onclick = function(){
    if(songList.includes(songQuery.value)) {
        alert('Yes, we play "' +  songQuery.value + '"!');
    } else {
        alert('No we do not play this song.');
    }
}

Answer 4

 var songList = ["Margaritaville", "Boys of Summer", "Somebody Like You"], findButton = document.getElementById("findSong"), songQuery = document.getElementById("liveSearchBox"); findButton.onclick = function() { if (typeof songQuery.value === 'undefined' || songQuery.value === null || songQuery.value === '') { alert('please input the song name.'); return false; } if (songList.indexOf(songQuery.value) > -1) { alert('Yes, we play "' + songQuery.value + '"!'); } else { alert('Sorry "' + songQuery.value + '" was not found!'); } }; 

 <div class="live-search-list"> <input type="text" id="liveSearchBox" placeholder=" Search Songs or Artist"> <button id="findSong">Click to Find!</button> <ul id="songList"> <li class="song">Margaritaville</li> <li class="song">Boys of Summer</li> <li class="song">Somebody Like You</li> </ul> </div>