网页点击按钮文字闪烁消失问题排查及输入框移除修改需求

嘿，我来帮你搞定这个问题！你遇到的文字闪烁后消失的情况，根源其实很简单：

问题原因 #

你的按钮放在了<form>标签里面，而HTML里的<button>默认类型是submit——点击它会触发表单提交，导致页面重新加载，刚生成的随机文字自然就跟着刷新没了。

另外根据你的需求，我们可以直接移除输入框，用一个普通的页面元素来展示随机文字。

修改后的完整代码 #

<!doctype html>
<html>
<body>
  <button onclick="myFunction()">Click Me</button>
  <br>
  <hr>
  Words:<br>
  <div id="randomWordDisplay"></div>

  <script>
    function myFunction(){
      var randomWords = ['Alpha','Beta','Gamma','Epsilon','Kappa','Omega'];
      var callNumber = Math.floor(Math.random()*randomWords.length); // 改成取数组长度更灵活
      var randomWord = randomWords[callNumber];
      document.getElementById('randomWordDisplay').textContent = randomWord;
    }
  </script>
</body>
</html>

关键改动点 #

• 移除了<form>标签：这里不需要表单提交功能，去掉它就避免了默认的提交刷新行为
• 替换输入框为<div>：用div元素展示随机文字，更符合“单独展示”的需求
• 优化数组索引取值：把固定的6改成randomWords.length，以后数组增减单词时不用手动修改数字，更灵活
• 修改赋值方式：从设置input.value改成设置div.textContent，直接更新元素显示的文本

现在点击按钮，随机文字就会稳定显示在页面上，不会再消失啦！

内容的提问来源于stack exchange，提问作者Nakshatra Aich