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

Question

So I am fairly new to coding in general and I am currently working on an eCommerce website to develop my skills.

Using woocommerce in WordPress, I am trying to add a 'show/hide' style button to display or hide a chunk of text using JS, but not sure where I'm going wrong. Here is my JS code which is situated in my functions.php file:

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" is the span id for the chunk of text "read" is the button id "read()" is the onclick attribute

the chunk of text is currently hidden using css:

#batbut {
    display: none;
}

any help would be much appreciated and if any more information is required just lmk. Thanks!

Answer 1

Try something like this,

check if your DOM nodes exists if yes the toggle based on the current display state of the batbut element

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";
  }
}