Tengo diferentes secciones en wordpress y quiero mostrar una presionando el botón respectivo. el botón "rojo" abre la "sección roja" y los otros colores desaparecen, y continúa.
este es el código que hice, es "Error de tipo no detectado: no se pueden leer las propiedades de nulo (leyendo 'estilo')", ¿pueden ayudarme?
/*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>Los ID de sus botones no coinciden con los que usa en el método getElementById .
var vermelho = document.getElementById("vermelho"); <li><button id="buttonvermelho" onclick="trocaVermelho()"></button></li> vermelho no es lo mismo que buttonvermelho
EDITAR:
Además, si su secuencia de comandos js está incluida en su archivo .html antes de los elementos que está tratando de alcanzar, entonces está tratando de alcanzar elementos que no existen.
Incluya su JS en HTML después de los elementos.
Fue un error tipográfico que agregó un prefijo de botón a cada identificación que causó el error ya que el script buscaba abc no buttonabc .. Verifique la solución
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"; } }Prueba esto
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>