我无法添加或删除课程

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

您只需要结合使用三种方法 .contains() ， .add() 和 .remove() element.classList 属性中的“ strong>”和一个简单的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>

---

您可以检查元素以查看两者之间的类切换，也可以只观看绿色背景样式，该样式应用于带有{{ 1}}类别名称在两者之间切换。

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

Fiddle

更新：

Updated fiddle