[英]Loop through an array of songs using JS. If song is in the array, alert “Yes”. If it's not, alert “No”
我正在嘗試顯示樂隊在新網站上播放的歌曲列表。 用戶輸入歌曲名稱(在名為“ liveSearchBox”的輸入標簽中),然后單擊“ findSong”按鈕。 如果我們播放歌曲,我想提醒“是的,我們播放!”。 如果我們不這樣做,我想提醒“對不起,我們不播放。” 我已經嘗試了好幾個小時才能找出解決方案,但是還不夠先進。 謝謝你的幫助!
這是我的HTML代碼:
<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>
這是我的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++;
}
}
};
使用indexOf
:
if (songList.indexOf(songQuery.value) != -1)
alert('yes');
else
alert('no');
使用indexOf
是可以的,但是如果您想要一個在任何瀏覽器中都可以使用的解決方案,這是最快的方法:
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 + '".');
};
findButton.onclick = function(){
var msg = !!~songList.indexOf(songQuery.value) ? 'Yes, we play "' + songQuery.value + '"!' : 'No we do not play this song.';
alert(msg);
}
也許這對您來說更容易理解:
findButton.onclick = function(){
var msg = songList.includes(songQuery.value) ? 'Yes, we play "' + songQuery.value + '"!' : 'No we do not play this song.';
alert(msg);
}
或這個:
findButton.onclick = function(){
if(songList.includes(songQuery.value)) {
alert('Yes, we play "' + songQuery.value + '"!');
} else {
alert('No we do not play this song.');
}
}
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.