如何实现点击按钮后将数组随机内容输出到textarea中

你需要在原有代码基础上新增按钮、textarea元素，把随机取值逻辑封装为点击触发的函数，修改后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <!-- 点击触发的按钮 -->
  <button id="randomBtn">随机选取单词</button>
  <br><br>
  <!-- 展示结果的文本域 -->
  <textarea id="resultArea" rows="5" cols="30" readonly></textarea>

  <script>
    var myArray = [
      "Test",
      "Work",
      "Life"
    ];

    // 绑定按钮点击事件
    document.getElementById('randomBtn').addEventListener('click', function() {
      // 点击时才生成随机项
      var randomItem = myArray[Math.floor(Math.random() * myArray.length)];
      // 把结果写入textarea
      document.getElementById('resultArea').value = randomItem;
    })
  </script>
</body>
</html>

• 新增了button按钮元素，作为用户点击的交互触发入口
• 新增了textarea元素，用来展示随机选取的结果，设置了readonly属性避免用户误改内容
• 把原来页面加载就执行的随机取值逻辑封装到了按钮的点击事件回调中，只有用户点击时才会执行随机选取
• 把原来直接写入body.innerHTML的逻辑改为写入textarea的value属性，符合输出到文本域的需求

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