JavaScript onlick not working on browser but working perfectly in w3school tryit editor

please i need help, i copied some codes from w3school which works perfectly in their tryit editor but not working in my browser

this is the code

<div class="w3-sidebar w3-bar-block w3-border-right" style="display:none" id="mySidebar">
  <button onclick="w3_close()" class="w3-bar-item w3-large">Close &times;</button>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

<!-- Page Content -->
<div class="w3-teal">
  <button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button>
  <div class="w3-container">
    <h1>My Page</h1>
  </div>
</div>

<img src="img_car.jpg" alt="Car" style="width:100%">

<div class="w3-container">
<p>This sidebar is hidden by default, (style="display:none")</p>
<p>You must click on the "hamburger" icon (top left) to open it.</p>
<p>The sidebar will hide a part of the page content.</p>
</div>

<script>
function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}
</script>