1

小さなカウント ボタンを作成したいのですが、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] の数値を増減する必要があります。

誰かが私を助けることができますか？

4

5 に答える 5

5

必要なものは 2 つあります。

  • 変数 - JavaScript で情報を保存する方法
  • JavaScript でイベントに反応する方法であるイベント ハンドラー

まず、script タグを作成し、JavaScript カウント変数を配置します。これを body タグの下部に配置します。

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

ここで、プラス記号とマイナス記号がクリックされるたびに実行されるハンドラーを作成します。

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

ボタンがクリックされたときに呼び出す関数を 2 つ作成しましたが、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 に追加し、ボタンのクリックに反応してタスクを完了しました。

さて、ここに私たちが改善できることがいくつかあります：

  • addEventListenerDOM の汚染を回避し、目立たない JavaScript を作成するために使用できます。
  • KnockoutJSのようなより高度なツールを使用して、値を自分で更新する代わりに DOM 要素にバインドすることができます。
  • Eloquent JavaScriptを読んで、言語がどのように機能するかについてもっと学ぶことができます!

がんばって、JavaScript を使って楽しく学習してください :)

于 2013-05-29T12:48:17.513 に答える
2

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);
});
于 2013-05-29T12:48:03.080 に答える
0

この場合、スライダーを表示する入力タイプ範囲を使用します: <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 でサポートされていない入力タイプ番号の代わりに)

于 2013-05-29T13:59:28.030 に答える
0

示されているように、いくつかのスクリプトを書くことができます

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

同様に、あなたはそれを行うことができます - 減少ボタン

于 2013-05-29T12:49:10.883 に答える
-2

これはかなり単純に思えます。

(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;
    };
})();
于 2013-05-29T12:47:53.773 に答える