title: my code is returning "Uncaught TypeError: Cannot read properties of null (reading 'style')"
body: <p>I have different sections on wordpress and i want to show one pressing it respective button. the button &quot;red&quot; opens the &quot;red section&quot; and the other colors disappear, and goes along.</p>
  <p>this is the code i made, it's &quot;Uncaught TypeError: Cannot read properties of null (reading 'style')&quot;, can you help me?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*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";
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;li&gt;&lt;button id="buttonvermelho" onclick="trocaVermelho()"&gt;a&lt;/button&gt;&lt;/li&gt;
       &lt;li&gt;&lt;button id="buttonlaranja" onclick="trocaLaranja()"&gt;b&lt;/button&gt;&lt;/li&gt;
       &lt;li&gt;&lt;button id="buttonamarelo" onclick="trocaAmarelo()"&gt;c&lt;/button&gt;&lt;/li&gt;
       &lt;li&gt;&lt;button id="buttonverde" onclick="trocaVerde()"&gt;d&lt;/button&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>