open/close sidebar changing buttons

 function w3_open() {
 document.getElementById("mySidebar").style.display = "block";
 document.getElementById("w3-button").style.display = "none"
 document.getElementById("w3-buttondos").style.display ="inline-block"

 }

 function w3_close() {
 document.getElementById("mySidebar").style.display = "none";
 document.getElementById("w3-buttondos ").style.display = "none"
 document.getElementById("w3-button").style.display ="inline-block"
 }

<button class="w3-button w3-teal" onclick="w3_open()">☰</button>
     <button class="w3-buttondos w3-teal" onclick="w3_close()">✖</button>

it says me -> Uncaught TypeError: document.getElementById(…) is null

Answer

document.getElementById does not target a node by its class="" but by its id=""

<button id="w3-button" class="w3-button w3-teal" onclick="w3_open()">☰</button>

To target an element by its class you can use document.querySelector

document.querySelector(".w3-button")

Advertisement

Answer