开发者问题收集

我的代码返回“未捕获的类型错误:无法读取 null 的属性(读取‘样式’)”

2021-09-22
3039
javascript html

我在 wordpress 上有不同的部分，我想显示一个按下相应按钮的部分。按钮“红色”打开“红色部分”，其他颜色消失，然后继续。

这是我编写的代码，它是“未捕获的类型错误：无法读取 null 的属性（读取‘样式’）”，你能帮助我吗？ 

/*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>
3个回答

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

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";
    }
  }
Sanmeet
2021-09-22

尝试一下 

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>
Sojin Antony
2021-09-22

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

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

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

vermelho 与 buttonvermelho 不同>

编辑：

此外，如果您的 js 脚本包含在您尝试访问的元素之前的 .html 文件中，那么您尝试访问的元素并不现有。

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

stolen_orange
2021-09-22