如何将用户表单输入存入JavaScript数组以实现随机选择功能

问题说明 #

现有代码框架需要实现：用户输入选项后点击「Add」存入数组，点击「Let's Decide!」随机选择一项展示。目前缺少将用户输入存入decision数组以及把选项添加到页面展示的代码逻辑。

解决步骤 #

1. 监听表单提交事件：阻止表单默认提交行为，获取输入框内容
2. 验证输入有效性：避免空内容存入数组
3. 更新数组与页面展示：将有效输入加入decision数组，同时创建只读输入框添加到页面选项列表
4. 完善随机选择逻辑：处理数组为空时的提示，避免报错

完整代码实现 #

HTML（无需修改）

<body>
  <!--用户选项输入区-->
  <div id="center">
    <header>
      <h1 id="Title">Input Your Choices</h1>
      <form id="form">
        <input type="text" id="newT" placeholder="Options" />
        <input type="submit" id="sumbitT" value="Add" />
      </form>
    </header>
  </div>

  <main>
    <section class="option-list">
      <h2 id="option">Your Options</h2>
      <div id="options"></div>
    </section>
    <div class="container">
      <button id="decide"> Let's Decide! </button>
      <div id="output">DECISION</div>
    </div>
  </main>
</body>

JavaScript（完整实现）

let btn = document.getElementById('decide');
let output = document.getElementById('output');
let decision = [];
const optionsContainer = document.getElementById('options');
const form = document.getElementById('form');
const inputField = document.getElementById('newT');

// 监听表单提交，添加选项到数组和页面
form.addEventListener('submit', function(e) {
    // 阻止表单默认跳转行为
    e.preventDefault();
    const task = inputField.value.trim();
    // 验证输入不为空
    if (task) {
        // 将选项存入数组
        decision.push(task);
        // 创建只读输入框展示选项
        const optionInputEl = document.createElement('input');
        optionInputEl.classList.add('text');
        optionInputEl.type = 'text';
        optionInputEl.value = task;
        optionInputEl.setAttribute('readonly', 'readonly');
        // 添加到页面的选项容器中
        optionsContainer.appendChild(optionInputEl);
        // 清空输入框
        inputField.value = '';
    }
});

// 随机选择选项并展示
btn.addEventListener('click', function() {
    if (decision.length === 0) {
        output.innerHTML = '请先添加选项！';
        return;
    }
    const chosen = decision[Math.floor(Math.random() * decision.length)];
    output.innerHTML = chosen;
});

代码说明 #

• 表单提交时通过e.preventDefault()阻止页面刷新，获取输入内容后先做非空校验
• 每次添加有效选项时，同步更新decision数组和页面的选项列表
• 随机选择按钮增加了空数组判断，避免索引越界报错，同时给出友好提示

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