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

Question

这是我使用的代码，有人可以告诉我如何使该输入具有最小值和最大值。我尝试了 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>

Fiddle

Answer 1

除了缺少功能之外，您的代码还存在许多问题。我已尽力解决所有问题并为您提供易于理解的代码。

首先：内联 javascript（即将代码放入 onchange）是相当糟糕的做法
其次，您有多个具有相同id(<button id="minus") 的元素，在这种情况下应该使用class。

我修改了你的html如下

<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>

还有这个 js，注意我使用了jQuery 来节省一些打字，但稍作修改后，这段代码可以与纯香草DOM API 一起使用（document.querySelectorAll 等）

$(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;
});

和here is it in the fiddle

Answer 2

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

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

见jsFiddle

HTML

<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>

JavaScript

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);
}