Javascript I'；我正在尝试制作一个显示/隐藏样式按钮，以便在woocommerce产品描述中显示一段文本

所以我对一般的编码是相当陌生的，我目前正在一个电子商务网站上工作，以发展我的技能

在WordPress中使用woocommerce，我试图添加一个“显示/隐藏”样式的按钮，以使用JS显示或隐藏一段文本，但不确定哪里出了问题。下面是我的JS代码，它位于我的functions.php文件中：

var i=0;
function read(){
    if(!i){
        document.getElementByID("batbut").style.display ="inline";
        document.getElementByID("read").innerHTML="Close";
        i=1;
    }
    else{
        document.getElementByID("batbut").style.display ="none";
        document.getElementByID("read").innerHTML="Battery Warning Info";
        i=0;
    }
}

“batbut”是文本块的span id “read”是按钮id “read（）”是onclick属性

文本块当前使用css隐藏：

#batbut {
    display: none;
}

---

任何帮助都将不胜感激，如果需要更多信息，请联系lmk。谢谢

试试这样的东西

检查DOM节点是否存在，如果存在，则根据batbut元素的当前显示状态进行切换

function read() {
  const elmBatbut = document.getElementById("batbut");
  const elmRead = document.getElementById("read");

  if (!elmBatbut || !elmRead) return;

  if (elmBatbut.style.display === 'none') {
    elmBatbut.style.display = "inline";
    elmRead.innerHTML = "Close";
  } else {
    elmBatbut.style.display = "none";
    elmRead.innerHTML = "Battery Warning Info";
  }
}

---

您应该删除i变量并更正getElementById函数是的，按钮在那里，但单击时不会显示隐藏文本。我已经添加了您的代码，但问题仍然存在。这是按钮的HTML：电池警告信息是否需要更改？我已将此更改为，但仍没有调用该函数