点击提交按钮后新生成的Div元素显示即消失的问题求助

嘿，我一眼就看穿你遇到的问题啦——这是表单默认提交行为在搞鬼！咱们来一步步把它解决掉：

问题根源 #

你的按钮是<button type="submit">，放在<form>标签里的话，点击它浏览器会默认触发表单提交行为，也就是直接刷新整个页面。刚创建的div元素还没来得及在页面上站稳，就随着页面刷新被重置没了，所以你才会看到它一闪而过。

两种快速解决办法 #

方法1：阻止表单的默认提交行为

修改你的JavaScript事件处理函数，接收event参数并调用preventDefault()，直接拦截掉页面刷新的默认行为：

document.getElementById('button').addEventListener('click', function createPost(event) {
  // 关键代码：阻止表单默认提交刷新页面
  event.preventDefault();
  userInput();
});

方法2：把按钮改成普通按钮

直接修改HTML里的按钮类型，从submit改成button，这样它就只是个普通的点击按钮，不会触发表单提交了：

<button type="button" id="button">post</button>

给你整理好的完整可运行代码 #

HTML部分

<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>
  <!-- 这里用方法2的话就改成type="button" -->
  <button type="submit" id="button">post</button>
</form>
<script src="script.js"></script>

CSS部分（我加了点边距让布局更舒服）

div {
  border: 1px solid black;
  margin: 8px 0;
  padding: 6px;
}
#form {
  margin-top: 10px;
}

JavaScript部分（用方法1的写法，还加了点体验优化）

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) {
  event.preventDefault(); // 阻止页面刷新
  userInput();
  // 额外优化：提交后清空文本框并隐藏表单，回到初始状态
  document.getElementById('textarea').value = '';
  form.style.visibility = 'hidden';
  document.getElementById('postLink').style.visibility = 'visible';
});

function userInput() {
  const textarea = document.getElementById('textarea').value.trim();
  // 加trim避免提交空内容
  if (textarea.length > 0) {
    const cards = document.getElementById('cards');
    const div = document.createElement('div');
    cards.appendChild(div);
    div.textContent = textarea;
  }
}

我还额外加了点小细节：比如判断输入时用trim()避免生成空div，提交后自动清空文本框并恢复初始页面状态，用起来会顺手很多～

内容来源于stack exchange