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链接添加了一些辅助功能逻辑，以便找到正确的元素。

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

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

2 个答案:

HTML

的JavaScript