javascript - 简单的点击计数器

Question

我希望从 10 开始的数字显示在文本框中，每次单击按钮时，数字都会减少 1。如何在 Javascript 上执行此操作？

Answer 1

将您的文本字段定义为：

<input type="text" name="counter" id="countField" value="10"/>

然后定义一个 reductionValue 函数为：

function decreaseValue(){
    var fieldElem = document.getElementById("countField");
    fieldElem.value = parseInt(fieldElem.value, 10) -1;
}

将上述函数作为onclick函数添加到您的按钮中，这一切都应该完成。

Answer 2

好吧，您首先制作一个文本框和一个按钮：

<input id="mybox" type="text" value="10" />
<button id="mybutton">Decrease</button>

接下来，您需要一个单击处理程序来减少文本框中的值：

document.getElementById('mybutton').addEventListener("click", function(){
    var input = document.getElementById('mybox');
    mybox.value = parseInt(mybox.value, 10) - 1;
});

Answer 3

如果你有 jquery 包括它是非常简单的......

<script type='text/javascript'>
var totalClicks = 10;
$(document).ready(function() {
    $('INSERT THE ID OF THE BUTTON HERE').click(function() {
        totalClicks -= 1;
        $('INSERT THE NAME OF THE INPUT FIELD YOU WANT THE CONTENT HERE').val(totalClicks);
    });
});
</script>

Answer 4

演示：http: //jsfiddle.net/6kVD9/

​document.getElementById('btn').onclick = function() {
  var input = document.getElementById('input');
  input.value = parseInt(input.value) - 1;
};​​​​​

注意：它不是跨浏览器，使用 jQuery 或类似的库来处理 dom。

Answer 5

好吧，既然你指定了 JavaScript，我就不提 HTML5 数字输入了……哎呀。;)

任何人，JavaScript：

function counter(id){
input = document.getElemenyById(id); // the id of the element with the decreasing value

input.value = input.value - 1; //or input.value-- I guess
}

在 HTML 中：

<input type="text" id="id" value="10" /><!-- Field containing the value that is changed -->
<input type="button" name="counter" onclick="counter('id');" value="Clicky!" /> <!-- Button that changes the value when clicked -->