お気に入りリストを作成しています。
リストの横にあるハートのアイコンをクリックすると、お気に入りリストに追加され、もう1度クリックすると、リストから外されます(toggle)
おおむね動くようにはなったのですが、アイコンをクリックしていると、たまに空の要素が追加されます。また、削除しようとしたのに空の要素が残ったりします。
if文で「空の時は追加しない」などの処理をしたいのですが、うまく出来ずにいます。
この場合は、どのように対処したらいいのでしょうか、アドバイスを頂けたら幸いです。
<!DOCTYPE html> <html lang="en"> <head> <title>Like Button Practice</title> </head> <body> <ul class="list"></ul> <h2>My Favorite Dogs</h2> <div class="favorite"> </div> <script> const data = [ { "breed": "Beagle", "characteristics": "playful" }, { "breed": "Golden Retriever", "characteristics": "calm" }, { "breed": "Corgi", "characteristics": "bright" }, { "breed": "Goldendoodle", "characteristics": "gentle" }, { "breed": "Labrador Retriever", "characteristics": "loyal" }, ] const likes = []; const $likelist = document.querySelector('.favorite'); const addToLikelist = (el) => { likes.push(el); renderLikes(); } const elements = { "icon": document.querySelectorAll('svg'), "dom": document.querySelector('.list'), "favorite": document.querySelector('.favorite') } // Render method function test() { data.map(item => { renderList(item.breed); return item.breed; }) }; test(); function renderList(doggo) { const markup = ` <li id="${doggo}"> <svg class="icon icon-heart-outlined"> <use xlink:href="icon/sprite.svg#icon-heart-outlined"></use> </svg> ${doggo} </li> `; elements.dom.insertAdjacentHTML('beforeend', markup); } const likeTemplate = i => `<p>${i}</p>`; const renderLikes = () => { $likelist.innerHTML = likes.map(i => likeTemplate(i)).join(''); } elements.dom.addEventListener('click', e => { const id = e.target.parentNode.id; if (e.target.matches('.icon, .icon *')) { const index = likes.indexOf(e.target.parentNode.id); // If (Beagle, Golden Retriever... doesn't exist in likes array, it returns -1) if (index === -1) { likes.push(id); renderLikes(); } else { likes.splice(index, 1); renderLikes(); } } }); </script> </body> </html>
そういえば「たまに」なんですよね?
色々試行されたかと思いますが、現象が起きるときと起きない時の違いとかはありますか?
多分ですが、アイコン部分は<svg><use></use></svg> で記述していますが、クリックのtargetが <svg> として認識された時は const id = e.target.parentNode.id; がちゃんと認識されるのですが、クリックのtargetが <use> として認識された時は、上記のparentNode.idが見つからず、そのため空の要素が追加されてしまうようです。
あなたの回答
tips
プレビュー