时间戳

首页 > 解决方案 > 更新时获取数字输入的值，使用 stepUp 或 stepDown

javascript - 更新时获取数字输入的值，使用 stepUp 或 stepDown

问题描述

我正在使用以下代码段来更新我的数字输入字段的值： 

<div class="number-input">
                <button
                  type="button"
                  onclick="this.parentNode.querySelector('input[type=number').stepDown()"
                  style="border-right: 0.1px solid #555555"
                ></button>
                <input
                  class="quantity tank"
                  min="0"
                  name="soldier"
                  value="0"
                  type="number"
                  max="10"
                />
                <button
                  type="button"
                  onclick="this.parentNode.querySelector('input[type=number').stepUp()"
                  style="border-left: 0.1px solid #555555"
                  class="plus"
                ></button>
          </div>

但是，当我使用带有数字输入的 stepUp 和 stepDown 时，它的值不会在 DOM 中更新： 检查

问题

我想在每次更新时获取此输入字段的值（警报或只是将其记录到控制台）但因此无法开始这样做，是否有解决方法或我仍然可以访问的某种方式更新时输入字段的值？

$(".soldier").bind("keyup", function () {
  console.log($(".soldier").val());
});

这是我找到的解决方案之一，但它仅在用户聚焦并在输入字段内按下一个键时才有效，而我正在使用其他两个按钮更新该字段。

标签： javascripthtmlcssdom

解决方案

DOM属性通常不会在 DOM 更改时自动更改（尽管有一些例外）。该value属性也不例外 - 当输入中的值更改时，元素的 DOM 标记不会更改。但这并不妨碍您检索该值 - 只需选择输入并检查其.value属性（不要使用getAttribute）：

document.querySelector('div + button').addEventListener('click', () => {
  console.log(document.querySelector('input').value);
});
<div class="number-input">
                <button
                  type="button"
                  onclick="this.parentNode.querySelector('input[type=number').stepDown()"
                  style="border-right: 0.1px solid #555555"
                ></button>
                <input
                  class="quantity tank"
                  min="0"
                  name="soldier"
                  value="0"
                  type="number"
                  max="10"
                />
                <button
                  type="button"
                  onclick="this.parentNode.querySelector('input[type=number').stepUp()"
                  style="border-left: 0.1px solid #555555"
                  class="plus"
                ></button>
</div>
<button>Log current value</button>

如果您想在更新后立即检查新值，请添加一个更改侦听器：

const input = document.querySelector('input');
const logNewValue = () => {
  console.log(document.querySelector('input').value);
};
document.querySelector('div + button').addEventListener('click', logNewValue);
input.addEventListener('change', logNewValue);
<div class="number-input">
                <button
                  type="button"
                  onclick="this.parentNode.querySelector('input[type=number').stepDown(); logNewValue()"
                  style="border-right: 0.1px solid #555555"
                ></button>
                <input
                  class="quantity tank"
                  min="0"
                  name="soldier"
                  value="0"
                  type="number"
                  max="10"
                />
                <button
                  type="button"
                  onclick="this.parentNode.querySelector('input[type=number').stepUp(); logNewValue()"
                  style="border-left: 0.1px solid #555555"
                  class="plus"
                ></button>
</div>
<button>Log current value</button>

此外，如果可能的话，最好避免使用内联处理程序，它们现在有太多值得使用的问题，例如疯狂的范围链和引号转义问题。改为使用 Javascript 正确附加事件侦听器addEventListener。

推荐阅读