my code is returning "Uncaught TypeError: Cannot read properties of null (reading 'style&#-CodePudding

I have different sections on wordpress and i want to show one pressing it respective button. the button "red" opens the "red section" and the other colors disappear, and goes along.

this is the code i made, it's "Uncaught TypeError: Cannot read properties of null (reading 'style')", can you help me?

/*gets the section ids*/
var vermelho = document.getElementById("vermelho");
var laranja = document.getElementById("laranja");
var amarelo = document.getElementById("amarelo");
var verde = document.getElementById("verde");
  
  /*-----------------*/

window.trocaVermelho = function(){
  if (vermelho.style.display === "none") {
    vermelho.style.display = "block";
    laranja.style.display = "none";
    amarelo.style.display = "none";
    verde.style.display = "none";

} else{
    vermelho.style.display = "block";
}
}
function trocaLaranja(){
  
  if (laranja.style.display === "none") {
    vermelho.style.display = "none";
    laranja.style.display = "block";
    amarelo.style.display = "none";
    verde.style.display = "none";
  } else {
    laranja.style.display = "block";
  }
}

function trocaAmarelo(){
  
 
  if (amarelo.style.display === "none") {
     vermelho.style.display = "none";
    laranja.style.display = "none";
    amarelo.style.display = "block";
    verde.style.display = "none";
  } else {
   amarelo.style.display = "block";
  }
}

function trocaVerde(){
   
  
  if (verde.style.display === "none") {
    verde.style.display = "block";
  } else {
    verde.style.display = "none";
  }
}

<ul>
    <li><button id="buttonvermelho" onclick="trocaVermelho()">a</button></li>
     <li><button id="buttonlaranja" onclick="trocaLaranja()">b</button></li>
     <li><button id="buttonamarelo" onclick="trocaAmarelo()">c</button></li>
     <li><button id="buttonverde" onclick="trocaVerde()">d</button></li>
</ul>

CodePudding user response：

It was a typo you added a button prefix to every id which caused the error as the script was looking for abc not buttonabc .. Check solution

HTML =>

<ul>
  <li>
    <button id="vermelho" onclick="trocaVermelho()">Button 1</button>
  </li>
  <li>
    <button id="laranja" onclick="trocaLaranja()">Button 2</button>
  </li>
  <li>
    <button id="amarelo" onclick="trocaAmarelo()">Button 3</button>
  </li>

  <li>
    <button id="verde" onclick="trocaVerde()">Button 4</button>
  </li>

</ul>

Js =>

  /*gets the section ids*/
  const vermelho = document.getElementById("vermelho");
  const laranja = document.getElementById("laranja");
  const amarelo = document.getElementById("amarelo");
  const verde = document.getElementById("verde");

  /*-----------------*/

  const trocaVermelho = (e) => {

    if (vermelho.style.display === "none") {
      vermelho.style.display = "block"; laranja.style.display = "none"; amarelo.style.display = "none"; verde.style.display = "none";
    } else {
      vermelho.style.display = "block";
    }
  }



  function trocaLaranja() {
    if (laranja.style.display === "none") {
      vermelho.style.display = "none"; laranja.style.display = "block"; amarelo.style.display = "none"; verde.style.display = "none";
    } else {
      laranja.style.display = "block";
    }
  }


  function trocaAmarelo() {
    // try using this  function to get styles initially ! getComputedStyle(amarelo).display


    if (amarelo.style.display === "none") {
      vermelho.style.display = "none"; laranja.style.display = "none"; amarelo.style.display = "block"; verde.style.display = "none";
    } else {
      amarelo.style.display = "block";
    }
  }

  function trocaVerde() {
    if (verde.style.display === "none") {
      verde.style.display = "block";
    } else {
      verde.style.display = "none";
    }
  }

CodePudding user response：

Try this

var vermelho = document.getElementById("vermelho");
var laranja = document.getElementById("laranja");
var amarelo = document.getElementById("amarelo");
var verde = document.getElementById("verde");
  
  /*-----------------*/

function trocaVermelho(){
  if (vermelho.style.display === "none") {
    vermelho.style.display = "block";
    laranja.style.display = "none";
    amarelo.style.display = "none";
    verde.style.display = "none";

} else{
    vermelho.style.display = "block";
}
}
function trocaLaranja(){
  
  if (laranja.style.display === "none") {
    vermelho.style.display = "none";
    laranja.style.display = "block";
    amarelo.style.display = "none";
    verde.style.display = "none";
  } else {
    laranja.style.display = "block";
  }
}

function trocaAmarelo(){
  
 
  if (amarelo.style.display === "none") {
     vermelho.style.display = "none";
    laranja.style.display = "none";
    amarelo.style.display = "block";
    verde.style.display = "none";
  } else {
   amarelo.style.display = "block";
  }
}

function trocaVerde(){
   
  
  if (verde.style.display === "none") {
    verde.style.display = "block";
  } else {
    verde.style.display = "none";
  }
}

<html>
<ul>
  <li id="vermelho" style="display:none">vermelho </li>
  <li id="laranja"  style="display:none">laranja </li>
  <li id="amarelo"  style="display:none">amarelo </li>
  <li id="verde"  style="display:block">verde</li>
</ul>
    <button id="buttonvermelho" onclick="trocaVermelho()">trocaVermelho</button>
     <button id="buttonlaranja" onclick="trocaLaranja()">trocaLaranja</button>
     <button id="buttonamarelo" onclick="trocaAmarelo()">trocaAmarelo</button>
     <button id="buttonverde" onclick="trocaVerde()">trocaVerde</button>

</html>

CodePudding user response：

Your buttons ids don't match ones you use in getElementById method.

var vermelho = document.getElementById("vermelho");

<li><button id="buttonvermelho" onclick="trocaVermelho()"></button></li>

vermelho is not the same as buttonvermelho

EDIT:

Also, if your js script is included into your .html file before the elements you're trying to reach, then you're trying to reach not existing elements.

Please include your JS into HTML after the elements.