javascript - シンプルなクリックカウンター

Question

10から始まる数字をテキストボックスに表示したいのですが、ボタンがクリックされるたびに数字が1ずつ下がります。Javascriptでこれを行うにはどうすればよいですか。

Answer 1

テキストフィールドを次のように定義します。

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

次に、decreaseValue関数を次のように定義します。

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