Why does my div element display and then disappear after clicking the submit button?

I add an addEventListener so that when the user clicks on the "post" button, a new div with the user input should appear above it. But it disappears as soon as it appears. I have attached a live example to better illustrate the problem.

const form = document.getElementById('form');
form.style.visibility = 'hidden';

function comment() {
  const postLink = document.getElementById('postLink');
  postLink.style.visibility = 'hidden';

  if (form.style.visibility === 'hidden') {
    form.style.visibility = 'visible';
  } else {
    form.style.visibility = 'hidden';
  }
}

document.getElementById('button').addEventListener('click', function createPost() {
  userInput();
});

function userInput() {
  const textarea = document.getElementById('textarea').value;
  if (textarea.length > 0) {
    const cards = document.getElementById('cards');
    const div = document.createElement('div');
    cards.appendChild(div);
    div.textContent = textarea;
  }
}

div {
  border: 1px solid black
}

<div class="cards" id="cards">
  <div>Type anything you want here and it will keep expanding.</div>
</div>
<p id="postLink"><a onclick='comment()' href="#">post</a></p>
<form id="form">
  <label for="textarea"></label>
  <textarea name="post" id="textarea"></textarea>
  <button type="submit" id="button">post</button>
</form>

<script src="script.js"></script>

Solution

The div is disappearing because the form's submit button triggers a page reload. That's why the DOM is resetting. Just add a event.preventDefault() to your event listener to override the default action.

document.getElementById('button').addEventListener('click', function createPost(event) {
  event.preventDefault(); // Prevent form submission
  userInput();
});

Try it out below:

const form = document.getElementById('form');
form.style.visibility = 'hidden';

function comment() {
  const postLink = document.getElementById('postLink');
  postLink.style.visibility = 'hidden';

  if (form.style.visibility === 'hidden') {
    form.style.visibility = 'visible';
  } else {
    form.style.visibility = 'hidden';
  }
}

document.getElementById('button').addEventListener('click', function createPost() {
  event.preventDefault(); // Prevent form submission
  userInput();
});

function userInput() {
  const textarea = document.getElementById('textarea').value;
  if (textarea.length > 0) {
    const cards = document.getElementById('cards');
    const div = document.createElement('div');
    cards.appendChild(div);
    div.textContent = textarea;
  }
}

.cards {
  display: grid;
  grid-template-columns: repeat(1, minmax(100px, 1fr));
  gap: 40px;
  justify-content: center;
}

.cards>div {
  border-top-style: solid;
  border-width: 5px 1px 0px 0px;
  box-shadow: 5px 5px 20px #e0dfdf;
  justify-self: center;
  padding: 10px;
}

<div class="cards" id="cards">
  <div>Type anything you want here and it will keep expanding.</div>
</div>
<p id="postLink"><a onclick='comment()' href="#">post</a></p>
<form id="form">
  <label for="textarea"></label>
  <textarea name="post" id="textarea" rows="8" cols="50" placeholder="start typing your essay..."></textarea>
  <div><button type="submit" id="button">post</button></div>
</form>
</div>

</div>
<script src="script.js"></script>