Toggle the visibility of an element when a button is clicked

I am trying to perform an exercise where I toggle the visibility of an element by accessing its ID. I can get it to disappear when I click it. However, I don't understand what is wrong with my code so that it doesn't reappear when clicked.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let button = document.getElementById("button");

document.getElementById("button").onclick = function() {
  if (button.style.display === "none") {
    button.style.display = "block";
  } else {
    button.style.display = "none";
  }
};

<!-- language: lang-css -->

#button {
  display: block;
}

<!-- language: lang-html -->

<p id="p1Text">Hello world</p>
<button id="button">Buttonni</button>

<!-- end snippet -->

I would refer to use element.classList.toggle to achieve this senario.

https://www.w3schools.com/howto/howto_js_toggle_class.asp

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const hello = document.querySelector('.hello');

document.getElementById("button").onclick = function() {
  hello.classList.toggle('hidden');
};

<!-- language: lang-css -->

.hidden {
  display: none;
}

<!-- language: lang-html -->

<p id="p1Text" class="hello">Hello world</p>
<button id="button">Buttonni</button>

<!-- end snippet -->

You are making the button disappear once it is clicked. Is that what you mean to make disappear?

Or are you trying to make the following paragraph disappear upon button click?

<p id="p1Text">Hello world</p>

If that is what you want to make disappear, you have to change the getElementById to the correct ID.

Currently, you are doing:

let button = document.getElementById("button"); 

which is getting the ID of the button, instead, get the element of the paragraph

let button = document.getElementById("p1Text"); 

That should fix it