為什么我不能使用 html 和 javascript 中的搜索功能？

Question

我正在嘗試使用 Musixmatch API 創建一個關於歌詞的網站，並希望應用自定義元素、影子 DOM、webpack 等。

但我在搜索 function 時遇到問題，因為即使我已經在 src -> script -> data -> data-source.js 和 song.js 中創建了 function，它也無法搜索

我請求您的幫助，謝謝：）

它仍然是未定義的結果:(

索引.html

 document.addEventListener("DOMContentLoaded", main);

 /* Dasar */ * { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; }:root { --warna-hitam:#333333; --warna-ungu: #2c072c; --warna-pink: #ff536e; --warna-putih: #FFFAF0; --gradasi: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%); --bayangan: rgba(0, 0, 0, 0.2); } h1,h2,h3{ font-family: 'Montserrat', sans-serif; text-align: center; } h4,h5,h6,p { font-family: 'Poppins', sans-serif; }.section { padding: 4rem 1.5rem; display: block; } body, button, input, select, textarea{ font-family: 'Montserrat', sans-serif; }.container { text-align: center; margin: 0; } /* ----------------------------------- */ /*Form Pencarian*/ form { width:1200px; margin:50px auto; }.search { padding:20px 30px; border-radius: 15px; background:rgba(197, 190, 190, 0.2); border:0px solid #dbdbdb; font-family: 'Montserrat', sans-serif; font-size: 16px; }.button { position:relative; padding:18px 24px; border-radius: 12px; margin-left: 10px; left:-8px; background-color:#FF8C00; color:#fafafa; font-family: 'Montserrat', sans-serif; font-weight: bolder; font-size: 18px; }.button:hover { background-color:#fafafa; color:#FF8C00; } /* ----------------------------------- */ /* Card */.cards-list { z-index: 0; width: 100%; display: flex; justify-content: space-around; flex-wrap: wrap; }.card { margin: 30px auto; width: 300px; height: 300px; border-radius: 40px; box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22); cursor: pointer; transition: 0.4s; }.card.card_image { width: inherit; height: inherit; border-radius: 40px; }.card.card_image img { width: inherit; height: inherit; border-radius: 40px; object-fit: cover; }.card.card_title { text-align: center; border-radius: 0px 0px 40px 40px; font-family: sans-serif; font-weight: bold; font-size: 30px; margin-top: -80px; height: 40px; }.card:hover { transform: scale(0.9, 0.9); box-shadow: 5px 5px 30px 15px rgba(0,0,0,0.25), -5px -5px 30px 15px rgba(0,0,0,0.22); }.title-white { color: white; }.title-black { color: black; } @media all and (max-width: 500px) {.card-list { /* On small screens, we are no longer using row direction but column */ flex-direction: column; } } /* ----------------------------------- */ /* Menu Navigasi */ ul.topnav { list-style-type: none; margin: 0; padding: 0; box-shadow: rgba(0, 0, 0, 0.2); overflow: hidden; background-color: var(--warna-ungu); } ul.topnav li { float: left; } ul.topnav li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } ul.topnav li a:hover { background-color: #111; } ul.topnav li.icon { display: none; } /* ----------------------------------- */ /* Text Heading */.heading { margin: 20px; font-size: 2rem; color: var(--warna-pink); }.subtitle { margin: 15px; text-align: center; font-size: 1.2rem; color: #3f4957; } /* ----------------------------------- */ /* FONT */ @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); /* ----------------------------------- */ /* Footer */ footer{ display: flex; flex-direction: column; margin: 20px 0px; padding: 30px 30px; background-color: var(---warna-putih); color: #3f4957; text-align: center; font-size: 12px; font-weight: 800; } /* ----------------------------------- */ /* RENSPONSIVE */ /* Saat lebar layar kurang dari 680 pixel, sembunyikan semua menu item kecuali item yang pertama yaitu("Home"). Tampilkan juga list item yang berisi link untuk membuka menu yaitu (li.icon) */ @media screen and (max-width:680px) { ul.topnav li:not(:first-child) { display: none; } ul.topnav li.icon { float: right; display: inline-block; } } /* Class dengan nama "responsive" akan ditambahkan oleh JavaScript saat user mengklik icon. Munculnya Class ini akan mendisplay isi list menu */ @media screen and (max-width:680px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="src/style/style:css"> <script src="https.//kit.fontawesome.com/1cb0b252aa.js" crossorigin="anonymous"></script> <link rel="shortcut icon" href="src/img/favicon:png"> <title>DapatLirik</title> </head> <header> <nav id="appBar" class="app-bar"> <ul class="topnav"> <li><a href="#"><i class="fas fa-music"></i>Dapat<strong>Lirik</strong></a></li> <li><a href="https.//www.instagram:com/ihsandroid/">About Us</a></li> <li><a href="#find-lyrics">Find Lyrics</a></li> <li class="icon"> <a href="javascript;void(0)." onclick="myMenu()">☰</a> </li> </ul> </nav> </header> <body> <main> <.-- Search Lagu --> <section> <h3 class="heading" id="find-lyrics" ><span><i class="fab fa-mixcloud fa-2x"></i></span> Lirik Favorit Anda Disini.</h3> <p class="subtitle">Temukan Lirik Lagu favorit anda dengan satu klik saja:</p> <div class="container search-container" id="search-container"> <form id="track.search"> <input class="search" type="search" placeholder="Ketik Judul Lagu/Lirik" id="searchElement" required> <input class="button" type="button" id="searchButtonElement" value="Cari"> </form> </div> </section> <.-- Top 8 Tracks --> <section> <h3 class="heading"><span><i class="fas fa-microphone-alt fa-2x"></i></span>Top 8 Lirik Terfavorit</h3> <p class="subtitle">8 Lirik Lagu Terfavorit Akhir-Akhir Ini</p> <div id="songList"></div> </section> <.-- Card --> <div class="cards-list" id="songList"> <div class="card 1" id="artist.albums.get"> <div class="card_image"> <img src="https://i.redd.it/b3esnz5ra34y.jpg" /> </div> <div class="card_title title-white"> <p>Card Title</p> </div> </div> <div class="card 2"> <div class="card_image" id="artist.albums.get"> <img src="https://cdn.blackmilkclothing.com/media/wysiwyg/Wallpapers/PhoneWallpapers_FloralCoral.jpg" /> </div> <div class="card_title title-white"> <p>Card Title</p> </div> </div> <div class="card 3"> <div class="card_image" id="artist.albums.get"> <img src="https://media.giphy.com/media/10SvWCbt1ytWCc/giphy.gif" /> </div> <div class="card_title"> <p>Card Title</p> </div> </div> <div class="card 4"> <div class="card_image" id="artist.albums.get"> <img src="https://media.giphy.com/media/LwIyvaNcnzsD6/giphy.gif" /> </div> <div class="card_title title-black"> <p>Card Title</p> </div> </div> <div class="card 5"> <div class="card_image" id="artist.albums.get"> <img src="https://i.redd.it/b3esnz5ra34y.jpg" /> </div> <div class="card_title title-white"> <p>Card Title</p> </div> </div> <div class="card 6"> <div class="card_image" id="artist.albums.get"> <img src="https://cdn.blackmilkclothing.com/media/wysiwyg/Wallpapers/PhoneWallpapers_FloralCoral.jpg" /> </div> <div class="card_title title-white"> <p>Card Title</p> </div> </div> <div class="card 7"> <div class="card_image" id="artist.albums.get"> <img src="https://media.giphy.com/media/10SvWCbt1ytWCc/giphy.gif" /> </div> <div class="card_title"> <p>Card Title</p> </div> </div> <div class="card 8"> <div class="card_image" id="artist.albums.get"> <img src="https.//media;giphy.com/media/LwIyvaNcnzsD6/giphy.gif" /> </div> <div class="card_title title-black"> <p>Card Title</p> </div> </div> </div> </main> <.-- Javascript Disini --> <script> const myMenu = () => { document.getElementsByClassName("topnav")[0].classList.toggle("responsive"); } </script> <script src="src/script/data/songs.js"></script> <script src="src/script/data/data-source.js"></script> <script src="src/script/view/main.js"></script> <script src="app.js"></script> </body> <footer> <h3><i class="fas fa-music"></i>Dapat<strong>Lirik</strong> 2020 - By <span><i class="fab fa-instagram"></i></span>Ihsandroid </h3> </footer> </html>

 //data-source.js function DataSource(onSuccess, onFailed) { this.onSuccess = onSuccess; this.onFailed = onFailed; } DataSource.prototype.searchSongs = function (keyword) { const filteredSongs = songs.filter(songs => songs.name.toUpperCase().includes(keyword.toUpperCase())); if (filteredSongs.length) { this.onSuccess(filteredSongs); } else { this.onFailed(`${keyword} is not found`); } }; //songs.js const songs = [ { "track_id": 15445219, "track_name": "Alejandro", "has_lyrics": 1, "album_name": "The Fame Monster", "artist_id": 378462, "artist_name": "Lady Gaga", "updated_time": "2017-01-08T07:30:05Z" }, { "track_id": 15445219, "track_name": "Alejandro", "has_lyrics": 1, "album_name": "The Fame Monster", "artist_id": 378462, "artist_name": "Lady Gaga", "updated_time": "2017-01-08T07:30:05Z" }, { "track_id": 15445219, "track_name": "Alejandro", "has_lyrics": 1, "album_name": "The Fame Monster", "artist_id": 378462, "artist_name": "Lady Gaga", "updated_time": "2017-01-08T07:30:05Z" } ] main.js const main = () => { const searchElement = document.querySelector("#searchElement"); const buttonSearchElement = document.querySelector("#searchButtonElement"); const songsListElement = document.querySelector("#songList"); const onButtonSearchClicked = () => { const dataSource = new DataSource(renderResult, fallbackResult); dataSource.searchSongs(searchElement.value); }; const renderResult = results => { songsListElement.innerHTML = ""; results.forEach(songs => { const {name, album, description} = songs const songsElement = document.createElement("div"); songsElement.setAttribute("class", "songs"); songsElement.innerHTML = `<img class="songs-album" src="' + ${album} + '" alt="Songs Album"> <div class="songs-info"> <h2>${name}</h2> <p>${description}</p> </div>`; songsListElement.appendChild(songsElement); }) }; const fallbackResult = message => { songsListElement.innerHTML = ""; songsListElement.innerHTML += `<h2 class="placeholder">${message}</h2>`; }; buttonSearchElement.addEventListener("click", onButtonSearchClicked); };

這是我在 GITHUB 上的代碼：

點擊這里

Answer 1

您在 song.name 上調用 toUpperCase()，這是一個在歌曲對象中不存在的字段。 你是說songs.track_name嗎？

Answer 2

我在這里看到兩個問題。 1) 名稱字段不是歌曲 arrays (songs.js) 文件中歌曲對象/json 的一部分。 如果要搜索名稱，請將字段名稱更改為要搜索的鍵之一（track_name、album_name 等）

songs.filter(songs => songs.track_name.toUpperCase().includes(keyword.toUpperCase()));

2) 您在 renderResult function 中使用名稱、專輯、描述字段。

將它們更改為 track_name、album_name 等。

const renderResult = (results) => {
    songsListElement.innerHTML = '';
    results.forEach((songs) => {
      const { track_name, album_name, updated_time } = songs;

      const songsElement = document.createElement('div');
      songsElement.setAttribute('class', 'songs');

      songsElement.innerHTML = `<img class="songs-album" src="' + ${album_name} + '" alt="Songs Album">
            <div class="songs-info">
            <h2>${track_name}</h2>
            <p>${updated_time}</p>
            </div>`;

      songsListElement.appendChild(songsElement);
    });

在此之后，我看到您也在嘗試加載一些圖像。 您需要放置帶有歌曲名稱的圖像才能從本地加載它