Javascript 为什么我的按钮不能与onclick事件同步？

我在学习javascript时，看到了一段关于使用onclick事件的视频，这家伙制作了一张卡片，可以扩展显示它所截取的部分内容。我只能通过观看视频来理解。因此，为了加深我的理解，我决定对视频中显示的内容进行重新编码，而不回头看

我得到了我想要的，但有一件小事让我很沮丧。当我运行我的代码时，我得到的压缩卡上有一个按钮，上面写着“显示更多哪些是好的”，但当我按下按钮时，卡会扩展，但按钮上仍然写着“显示更多哪些是坏的”，只有当我第三次按下按钮压缩卡时，按钮才会显示得更少

var contentDiv=document.querySelector.content'； var button=document.querySelector'.button'； button.onclick=函数{ ifcontentDiv.className=='content'{ contentDiv.classList.add'execute'； button.innerHTML='显示更多'； }else ifcontentDiv.className==“内容显示”{ 类列表。删除“出现”； button.innerHTML='Show Less'； } }; *{ 保证金：0； 填充：0； } 身体{ 背景：a1a1； } .组{ 利润率最高：10%； 显示器：flex； 柔性流动：柱状nowrap； 对齐项目：居中； } .内容{ 背景：dedede； 边界半径：10px； 宽度：250px； 高度：300px； 溢出：隐藏； 颜色：2E； 背景：e8e8e8； 过渡：全部5秒； } .出现{ 高度：530px； 颜色：e8e8e8； 背景：2E； } .内容p{ 利润率：10px； } .按钮{ 利润率：10px； 背景：f0ca62； 填充物：5px； 边界半径：10px； 光标：指针； } 事件 宽度膨胀刮板灯连续耐用性 草木宿舍带球包租欢乐砖柜巢使用经济学人 宽度膨胀刮板灯连续耐用性 草木宿舍带球包租欢乐砖柜巢使用经济学人 宽度膨胀刮板灯连续耐用性 草木宿舍带球包租欢乐砖柜巢使用经济学人

宽度膨胀刮板灯连续耐用性 草木宿舍带球包租欢乐砖柜巢使用经济学人 宽度膨胀刮板灯连续耐用性 草木宿舍带球包租欢乐砖柜巢使用经济学人

宽度膨胀刮板灯连续耐用性 草木宿舍带球包租欢乐砖柜巢使用经济学人

显示更多

---

“显示更多”和“显示更少”按钮似乎颠倒了，请尝试以下操作：

button.onclick = function(){
  if(contentDiv.className == 'content'){
    contentDiv.classList.add('appear');
    button.innerHTML = 'Show Less';
  } else if(contentDiv.className == 'content appear'){
    contentDiv.classList.remove('appear');
    button.innerHTML = 'Show More';
  }
};

---

您的代码设置为更改按钮的文本，以便在div.content仅包含类内容时显示更多内容，而在包含类内容时显示更少内容。若要切换该选项，请切换if语句条件或将button.innerHTML设置为的文本。