我的代码返回“未捕获的类型错误：无法读取 null 的属性（读取'样式'）”答案

【问题标题】：my code is returning "Uncaught TypeError: Cannot read properties of null (reading 'style')"我的代码返回“未捕获的类型错误：无法读取 null 的属性（读取'样式'）”
【发布时间】：2021-11-16 04:57:09
【问题描述】：

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

这是我编写的代码，它是“未捕获的类型错误：无法读取 null 的属性（读取 'style'）”，您能帮帮我吗？

/*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>

【问题讨论】：

标签： javascript html

【解决方案1】：

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

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

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

vermelho与buttonvermelho不一样

编辑：

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

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

【讨论】：

vermelho 是部分 ID，而不是按钮。
嗯...那请问您是否使用<script></script>标签将您的js代码包含在文档正文之前？
是的！我做了，它也显示错误
请查看我回答的编辑部分
你的问题解决了吗？

【解决方案2】：

试试这个

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>

【讨论】：

【解决方案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";
    }
  }

【讨论】：