保存和累加多个选择的整数值答案

【问题标题】：Saving and adding up integer values of multiple selections保存和累加多个选择的整数值
【发布时间】：2021-11-09 22:58:36
【问题描述】：

我试图有 10 个下拉选项和 3 个选项：1、2 或 3，并将每个选项保存为整数，然后将它们全部加起来并显示。我不确定如何在 HTML 中执行此操作，希望得到一些帮助。

这是我尝试使用的选择示例（来自 w3schools），但我不知道如何将输入临时存储为整数，然后再使用它。

<!DOCTYPE html>
<html>
<body>

<h1>The optgroup element</h1>

<p>The optgroup tag is used to group related options in a drop-down list:</p>

<form action="/action_page.php">
  <label for="number">Choose a number:</label>
  <select name="numbers" id="numbers">
    <optgroup label="Numbers">
      <option value="three">3</option>
      <option value="two">2</option>
      <option value="one">1</option>
  </optgroup>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

感谢任何形式的帮助。

【问题讨论】：

标签： html drop-down-menu sum

【解决方案1】：

您发布的大部分 html 都不是必需的，您真正需要的只是您的选择。表单元素实际上仅用于将信息从用户传递到服务器。至于你的 HTML 应该是什么样子：

<body>
    <select class="select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select class="select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select class="select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select class="select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</body>

要从多个选择中收集输入，正如您所描述的，将使用 javascript。下面的代码返回一个带有 '.select' 类的 html 元素列表。

let selectArray = document.querySelectorAll('.select');

接下来，您需要循环并将它们添加到变量中。

let number = 0;

for(let i = 0; i < selectArray.length; i++){
    number += parseInt(selectArray[i].value);
}

有几种方法可以保存变量，为了你的使用我推荐使用localStorage。

【讨论】：

所以我想出了如何打印数字，但问题是它在选择表格之前打印。有没有办法在 HTML 代码中刷新它？这是 localStorage 发挥作用的地方吗？谢谢！
你不想刷新，你想调用一个事件。通常这是通过一个按钮完成的。就本地存储而言，它非常简单。 "localStorage.setItem('key', 'value');"将设置一个值，其中 key 是一个将 localStorage 指向您保存的值的字符串。该值必须是一个字符串。 “localStorage.getItem('key');”将返回存储在键中的值。请注意，如果您要存储一个对象，您需要通过执行“JSON.stringify(objectName);”将其保存为 json。您应该查看 localStorage 文档以获取更多信息以满足您的需求。