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