html - 具有增加减少功能的按钮一个带有数量限制的html

Question

所以，我是 html 新手，我想知道如何制作一个具有增加和减少功能的按钮 (-/+)

整体应该是这样的

<button>-</button>
<input type="number"  min="0"
input type="number"  max="20">
<button>+</button>

（非常简单的例子，）但我唯一设法得到的是这个输入

<input type="number"  min="0"
input type="number"  max="5">

aaaandd 我有点设法让结果机器人在某个时候变得更长，但我只是失去了命令，所以......如果有人想出如何让它更长......主要任务......我会非常满意！（按钮应增加和减少 1 和 -1）

标签： htmlbuttoninput

Answer 1

您可以通过为输入提供一个 id 并从按钮的 onclick 函数（使用 querySelector）定位它来做到这一点。然后使用三元运算符有条件地赋值。

<button onclick="document.querySelector('#steve').value=parseInt(document.querySelector('#steve').value)<1?parseInt(document.querySelector('#steve').value):parseInt(document.querySelector('#steve').value)-1"">-</button>
<input type="number" id="steve" min="0" max="20" value=0>
<button onclick="document.querySelector('#steve').value=parseInt(document.querySelector('#steve').value)>19?parseInt(document.querySelector('#steve').value):parseInt(document.querySelector('#steve').value)+1">+</button>