使用javascript设置输入中的最大值和最小值

这是我使用的代码，有人能告诉我如何使输入具有最小值和最大值吗。我尝试了html属性

max=“10”

，但它不起作用。我想将最小值设置为0，最大值设置为10。当你点击加号时，当自由场点数达到0点时，你不能再增加点数

<input type="button" id="minus" value="-" onclick="textb.value = (textb.value-1);textc.value = (+textc.value+1)  ">
<input type="text" id="textb" name="name" value="0" readonly="readonly" />
<input type="button" value="+" onClick="textb.value = (+textb.value+1);textc.value = (textc.value-1)">Health
<p>
    <input type="button" id="minus" value="-" onclick="textm.value = (textm.value-1);textc.value = (+textc.value+1)  ">
    <input type="text" id="textm" name="name" value="0" readonly="readonly" />
    <input type="button" value="+" onClick="textm.value = (+textm.value+1);textc.value = (textc.value-1)">Energy</p>
<p>
    <input type="button" id="minus" value="-" onclick="textd.value = (textd.value-1);textc.value = (+textc.value+1)  ">
    <input type="text" id="textd" name="name" value="0" readonly="readonly" />
    <input type="button" value="+" onClick="textd.value = (+textd.value+1);textc.value = (textc.value-1)">Chakra</p>
<p>
    <input type="text" id="textc" name="name" readonly="readonly" value="10" />Free points</p>

健康

精力


脉轮


免费积分

---

除了功能缺失之外，您的代码还有许多问题。我尽了最大努力来解决这些问题，并为您提供易于理解的代码

所以首先：内联javascript（即将代码放入

onchange

）是一种非常糟糕的做法

---

其次，您有多个元素具有相同的

id

（

这里是解决此问题的不同方法。我不确定是否允许在三个属性中使用负值（如果不允许，则必须添加更多逻辑）

我已经消除了内联JavaScript，并在HTML代码中添加了一些可访问性逻辑，JavaScript将这些代码钩住，以便找到正确的元素

请参见

HTML

-
+
健康


-
+
能量


-
+
脉轮


免费积分


JavaScript
var buttons=document.querySelectorAll（'button[aria controls]'），
我
var freePointsEl=document.getElementById（'textc'）；
var freePoints=数量（freePointsEl.value）；
var maxFreePoints=10；//如果您愿意，使用输入元素的max属性可以是抽象的
对于（i=0；i最大自由点）{
//减去时不能超过最大自由点
//不要做任何事
自由点=最大自由点；
}否则{
//我们没事，做点什么
input.value=数字（input.value）+数字（this.value）；
}
freePointsEl.value=自由点；
}，假）；
}
max
和
min
仅适用于
input type=“number”
以这种方式使用内联JavaScript是个坏主意。@Valerij也适用于
input type=“range”
您的javascript也完全忽略了最大值和最小值；如果您不想让它超过/低于，您需要在javascript中进行自己的验证。谢谢您的帮助！
<p>
    <input type="button" class="minus" value="-">
    <input type="text" id="textb" value="0" readonly="readonly"/>
    <input type="button" class="plus" value="+">
    Health
</p>
<p>
    <input type="button" class="minus" value="-">
    <input type="text" id="textm" value="0" readonly="readonly" />
    <input type="button" class="plus" value="+">
    Energy
</p>
<p>
    <input type="button" class="minus" value="-">
    <input type="text" id="textd" value="0" readonly="readonly"/>
    <input type="button" class="plus" value="+">
    Chakra
</p>
<p>
    <input type="text" id="textc" readonly="readonly" />
    Free points
</p>

$(function(){
    var free = 10
      , max  = 10
      , min  = 0
      ;
    $('.minus').click(function(){
        var edit = $(this).parent().find('[type="text"]').get(0)
        if(edit.value > 0 && edit.value > min) {
            edit.value--;
            free++;
        }
        $("#textc").get(0).value = free;
    });
    $('.plus').click(function(){
        var edit = $(this).parent().find('[type="text"]').get(0)
        if(free > 0 && edit.value < max) {
            free--;
            edit.value++;
        }
        $("#textc").get(0).value = free;
    });
    $("#textc").get(0).value = free;
});

<p>
    <button type=button value=-1 aria-controls=textb>-</button>
    <input type=number id=textb readonly value=0 min=0 max=10 name=name>
    <button type=button value=1 aria-controls=textb>+</button>
    <label for=textb>Health</label>
</p>
<p>
    <button type=button value=-1 aria-controls=textm>-</button>
    <input type=number id=textm readonly value=0 min=0 max=10 name=name>
    <button type=button value=1 aria-controls=textm>+</button>
    <label for=textm>Energy</label>
</p>
<p>
    <button type=button value=-1 aria-controls=textd>-</button>
    <input type=number id=textd readonly value=0 min=0 max=10 name=name>
    <button type=button value=1 aria-controls=textd>+</button>
    <label for=textd>Chakra</label>
</p>
<p>
    <label for=textc><input type=number value=10 readonly id=textc /> Free points</label>
</p>

var buttons = document.querySelectorAll('button[aria-controls]'),
    i;

var freePointsEl = document.getElementById('textc');
var freePoints = Number(freePointsEl.value);
var maxFreePoints = 10; // this could be abstract to use the max attribute of the input element if you wish

for (i = 0; i < buttons.length; ++i) {
    buttons[i].addEventListener('click', function (event) {
        var input = document.getElementById(this.getAttribute('aria-controls'));

        freePoints -= Number(this.value);

        if (freePoints < 0) {
            // no more free points
            // do not do anything
            freePoints = 0;
        } else if (freePoints > maxFreePoints) {
            // cannot exceed max free points when subtracting
            // do not do anything
            freePoints = maxFreePoints;
        } else {
            // we're ok, do something
            input.value = Number(input.value) + Number(this.value);
        }

        freePointsEl.value = freePoints;

    }, false);
}