如何通过JavaScript获取用户输入并将乘法结果显示在HTML列表中

AI 小北

2026-10-14

实现方案

直接修改现有代码的HTML结构和JS逻辑即可，完整可运行代码如下：

1. HTML代码

<div style="background-color:#0E1FA8; color: #fff; padding: 15px;">
  <!-- 输入框改为number类型，限制只能输入数字，降低校验成本 -->
  <input type="number" id="amount_input" placeholder="请输入数值">
  <button onclick="other_amount_input()">Submit</button>
  <ul>
    <!-- 自定义data-multiplier属性存储对应乘数，新增span标签用于展示计算结果 -->
    <li data-multiplier="4">乘以4：<span class="calc-result"></span></li>
    <li data-multiplier="6">乘以6：<span class="calc-result"></span></li>
    <li data-multiplier="8">乘以8：<span class="calc-result"></span></li>
  </ul>
  <hr>
</div>

2. JavaScript代码

function other_amount_input() {
  // 获取输入值并转为数字类型
  const inputNum = Number(document.getElementById('amount_input').value);
  // 输入合法性校验
  if (isNaN(inputNum)) {
    alert('请输入合法的数字');
    return;
  }
  // 遍历所有列表项计算并渲染结果
  document.querySelectorAll('li[data-multiplier]').forEach(item => {
    const multiplier = Number(item.dataset.multiplier);
    item.querySelector('.calc-result').textContent = inputNum * multiplier;
  })
}