Я пытаюсь сделать кнопку стиля отображения / скрытия для отображения в описании продукта woocommerce для фрагмента текста

Question

Итак, я новичок в программировании в целом, и в настоящее время я работаю над веб-сайтом электронной коммерции, чтобы развивать свои навыки.

Используя woocommerce в WordPress, я пытаюсь добавить кнопку стиля «показать / скрыть» чтобы отобразить или скрыть кусок текста, используя JS, но не уверен, где я ошибаюсь. Вот мой код JS, который находится в моих функциях. 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" - это идентификатор диапазона для фрагмента текста, "чтение" - это идентификатор кнопки "чтение ( ) "является атрибутом onclick

фрагмент текста в настоящее время скрыт с использованием css:

#batbut {
    display: none;
}

, любая помощь будет очень принята, и если требуется дополнительная информация, просто lmk. Спасибо!

Answer 1

Попробуйте что-то вроде этого,

проверьте, существуют ли ваши узлы 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";
  }
}