Why wont my clear function work in this javascript/html code?

When I run this program and try to click on the CE button, nothing happens. I am not able to figure out why the display does not change to zero when I click on the button. Not sure whether it is problem with the function, the syntax, or the onclick element. What have I done wrong?

let display = 0;

function square() {
  display = document.querySelector('#display').innerHTML
  display = display * display;
  document.querySelector('#display').innerHTML = display;
}

function cube() {
  display = document.querySelector('#display').innerHTML
  display = display * display * display;
  document.querySelector('#display').innerHTML = display;
}

function root() {
  display = document.querySelector('#display').innerHTML
  display = Math.sqrt(display);
  document.querySelector('#display').innerHTML = display;
}

function clear() {
  display = 0;
  document.querySelector('#display').innerHTML = display;
}
<h1 class='bigbox' id="display">25</h1>
<div>
  <button class="button" style="font-size: 24px" onclick="square(); return false">x²</button>
  <button class="button" style="font-size: 23px" onclick="cube(); return false">x³</button>
  <button class="button" style="font-size: 24px" onclick="root(); return false">√x</button>
  <button class="ce" onclick="clear(); return false">CE</button>
</div>
<div>
  <button class="button">7</button>
  <button class="button">8</button>
  <button class="button">9</button>
  <button class="button">/</button>
</div>
<div>
  <button class="button">4</button>
  <button class="button">5</button>
  <button class="button">6</button>
  <button class="button" style="font-size: 30px">*</button>
</div>
<div>
  <button class="button">1</button>
  <button class="button">2</button>
  <button class="button">3</button>
  <button class="button">-</button>
</div>
<div>
  <button class="button">0</button>
  <button class="button" style="font-size: 50px">.</button>
  <button class="button">=</button>
  <button class="button">+</button>
</div>