我在wordpress上有不同的部分，我想显示一个按下它各自的按钮。按钮“red”打开“red部分”，其他颜色消失，并继续前进。

这是我编写的代码，它是“Uncatted TypeError：不能读取null的属性（读取'style')”，你能帮我吗？

---

顺晟科技：

试试这个

您的按钮ID与方法中使用的按钮ID不匹配。

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

与

不相同

---

编辑:

此外，如果您的脚本在您试图访问的元素之前就包含在您的文件中，那么您试图访问的不是现有的元素。

请在元素之后将您的JS包含到HTML中。

这是一个错误，您在每个id中添加了一个按钮前缀，这导致了错误，因为脚本正在寻找not..检查解决方案

HTML=>

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

js=>

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