How do I make a DIV set to style.display = "none" by default?

I'm trying to make a button that will display additional text when it's hit, however, I can only make it either

a) display the text by default or
b) hide the text by default but the button doesn't work.

Here's the JS code for the button:

function showInfo() {
  var x = document.getElementById("myDIV");
  
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myDIV">
 Hello World
</div>
<button type="button" class="btn btn-primary" click="showInfo()">
Show Info
</button>

Is there a way I can set the default style.display to none?

Solution

Your handler is click. It needs to be onclick. Also, I recommend either adding a class with display:none to your div, or simply inlining it, like this:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myDIV" style="display: none">
 Hello World
</div>
<button onclick="showInfo()">
Show Info
</button>

Then your JS can look like this:

function showInfo() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    return x.style.display = "block";
  }
  return x.style.display = "none";
}

Demo

function showInfo() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    return x.style.display = "block";
  }
  return x.style.display = "none";
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <div id="myDIV" style="display: none">
     Hello World
    </div>
    <button onclick="showInfo()">
    Show Info
    </button>