button - JavaScript中的计数按钮

Question

我想创建一个小的计数按钮，但不知道如何在 JavaScript 中制作它......这是代码：

HTML

<div id="input_div">
    <input type="text" size="25" value="0" id="count">
    <input type="button" value="-" id="moins">
    <input type="button" value="+" id="plus">
</div>

单击 -/+ 按钮时，它必须增加和减少 input[type=text] 中的数字。

有人能帮我吗？

score 5 · Accepted Answer

你需要两件事。

变量 - 这是在 JavaScript 中存储信息的方式
事件处理程序，这是对 JavaScript 中的事件作出反应的方式

首先，让我们创建一个 script 标签，并在其中放入一个 JavaScript 计数变量，我们将它放在 body 标签的底部：

<script>
    var count = 0;
</script>

现在，我们要创建一个处理程序，它会在单击加号和减号时执行

<script>
    var count = 0;
    function plus(){
        count++;
    }
    function minus(){
        count--;
    }
</script>

我们已经创建了两个函数在单击按钮时调用，但是我们不更新 HTML 中的值，或者调用它们，让我们更新 HTML 中的值。

我们将通过document.getElementByID更新元素然后更改其值来做到这一点。我们的脚本标签应该看起来像这样：

<script>
    var count = 0;
    var countEl = document.getElementById("count");
    function plus(){
        count++;
        countEl.value = count;
    }
    function minus(){
        count--;
        countEl.value = count;
    }
</script>

最后一件事，我们需要告诉 DOM 中的元素执行这些处理程序。

<div id="input_div">
    <input type="text" size="25" value="0" id="count">
    <input type="button" value="-" id="moins" onclick="minus()">
    <input type="button" value="+" id="plus" onclick="plus()">
</div>

我们已将它们作为事件处理程序添加到 DOM 中，以响应单击按钮，完成任务。

现在，这里有一些我们可以改进的地方：

我们可以使用它addEventListener来避免污染我们的 DOM，并创建不显眼的 JavaScript。
我们可以使用像KnockoutJS这样更高级的工具来处理将我们拥有的值绑定到 DOM 元素，而不是自己更新它。
我们可以阅读Eloquent JavaScript并了解有关该语言如何工作的更多信息！

祝你好运，愉快的 JavaScripting 和愉快的学习 :)

score 2 · Accepted Answer

JAVASCRIPT 的演示小提琴

代码 html -

<div id="input_div">
 <input type="text" size="25" value="0" id="count" />
 <input type="button" value="-" id="minus" onClick = "doMinus();" />
 <input type="button" value="+" id="plus" onClick = "doPlus();" />
</div>

代码 javaScript -

function doMinus(){
 document.getElementById("count").value = --document.getElementById("count").value;
}

function doPlus(){
 document.getElementById("count").value = ++document.getElementById("count").value;
}

jQuery版本

JQUERY 的演示小提琴

代码 html -

<div id="input_div">
  <input type="text" size="25" value="0" id="count" />
  <input type="button" value="-" id="minus" />
  <input type="button" value="+" id="plus" />
</div>

代码 jQuery -

$('#minus').click(function(){
  $("#count").val(parseInt($("#count").val())-1);
});
$('#plus').click(function(){
  $("#count").val(parseInt($("#count").val())+1);
});

score 0 · Accepted Answer

你可以写一些脚本，如图所示

<script>            
            function increase(){
                var a = 1;
                var textBox = document.getElementById("count");
                textBox.value = a;
                a++;
            }            
        </script>

<body>
        <button type="button" onclick="increase()">+</button>
        <input type="text" id="text">
    </body>

同样你可以做到 - 减少按钮

score 0 · Accepted Answer

在这种情况下，我使用显示滑块的输入类型范围：（ <input type="range" id="myInputRange" value="15" min="0" max="50" step="1" onchange="document.getElementById('output').textContent=value" ><span id="output">15</span> 而不是 IE 不支持的输入类型编号）

score -2 · Accepted Answer

这看起来很简单。

(function() {
    var count = 0;

    var minusButton = document.getElementById("moins");
    var plusButton  = document.getElementById("plus");
    var countBox    = document.getElementById("count");

    minusButton.onclick = function(e) {
        countBox.value = --count;
    };

    plusButton.onclick = function(e) {
        countBox.value = ++count;
    };
})();

button - JavaScript中的计数按钮

5 回答 5

Related

Reference