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  onclick="w3_open()">&#9776;</button>
     <button  onclick="w3_close()">&#10006;</button>

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

CodePudding user response：

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

<button id="w3-button"  onclick="w3_open()">&#9776;</button>

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

document.querySelector(".w3-button")

CodePudding user response：

If you are using document.getElementById() then you must declare id property in html element. Like: id="w3-button"

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 id="w3-button"  onclick="w3_open()" hidden>&#9776;</button>
<button id="w3-buttondos"  onclick="w3_close()">&#10006;</button>
<div id="mySidebar">
  My Sidebar
</div>