我無法添加或刪除課程

Question

我正在嘗試刪除一個類並在一個函數中添加一個類。 但是當我點擊按鈕時什么也沒有發生。

這是我的代碼

 function unlikeVerhaal(unlike) { unlike.preventDefault; document.querySelector('#unliked').classList.add('onzichtbaar'); document.querySelector('#liked').classList.remove('onzichtbaar'); } document.querySelector('.likebutton').addEventListener('submit', unlikeVerhaal);

 .onzichtbaar { display: none; }

 <li> <button type="submit" class="likebutton"> <img src="icons/lined.png" alt="lined heart" class="unliked" id="unliked"> <img src="icons/solid.png" alt="solid heart" id="liked" class="onzichtbaar"> </button> 777 </li>

我想要得到的是該類被添加到第一個圖像並被第二個圖像刪除。

Answer 1

您只需要使用element.classList屬性中的三種方法.contains() 、 .add()和.remove()的組合以及一個簡單的if/else statement （或三元運算符，如果您願意的話）作為可以在下面的代碼片段中看到：

 var btn = document.querySelector('.likebutton'); function unlikeVerhaal() { var ul = document.getElementById("unliked"); var l = document.getElementById("liked"); if (ul.classList.contains("onzichtbaar")) { ul.classList.remove("onzichtbaar"); l.classList.add("onzichtbaar"); console.log("Inspect your elements to see the class switching!") } else { l.classList.remove("onzichtbaar"); ul.classList.add("onzichtbaar"); console.log("Inspect your elements to see the class switching!") } } btn.addEventListener("click", unlikeVerhaal)

 .onzichtbaar {background-color: green;}

 <li> <button type="button" class="likebutton"> <div class="unliked" id="unliked">A</div> <div id="liked" class="onzichtbaar">B</div> </button> 777 </li>

---

您可以檢查元素以查看兩者之間的類切換，或者您可以僅觀看應用於具有onzichtbaar類名稱的元素在onzichtbaar之間切換的綠色背景樣式。

Answer 2

這將按您的預期工作：

function unlikeVerhaal(e) {
    e.preventDefault;
    document.getElementById('unliked').classList.add('onzichtbaar');
    document.getElementById('liked').classList.remove('onzichtbaar'); 
} 

document.getElementById('likebutton').addEventListener('click', unlikeVerhaal);

只需將submit更改為click並從按鈕中刪除type

小提琴

更新：

更新的小提琴