ボタンのクリック数の増減値

Question

こんにちは、値を増減するボタンを作るにはどうすればよいですか？ 1回クリックすると1を加算するボタン、1を押すと1を加算して値を1減らします。

私は約50個のボタンを持っていますが、現在は2個以上のボタンを選択するとリセットされます一度クリックされたボタンのすべての値を追加する必要があります。その周りサイトは次のようになります。

var clicks = 0; 
 

 
function clickME() { 
 
    clicks += 1; 
 
    if (clicks == 2) { 
 
    clicks = 0; 
 
    } 
 
    document.getElementById("clicks").innerHTML = clicks; 
 
}

<input type="Button" id="bt" />

Answer 1

各ボタン（またはより一般的には各要素）がDOM（ドキュメントオブジェクトモデル）の一部であることを考慮すると、それぞれがオブジェクトなので、誰も使用できなくなります。各ボタンにフィールドclicksを設定できますDOMオブジェクト：

function clickME(event) { 
    var btn = event.target; 
    btn.clicks = ((btn.clicks || 0) + 1) % 2; 
    window.clicks = (window.clicks || 0) + btn.clicks * 2 - 1; 
    document.getElementById("clicks").innerText = window.clicks; 
} 

はあなたのコードをチェックアウト、私はまたMOD（%）演算子でゼロをチェックするifを交換し、あなたのロジックを簡素化。さらにinnerHTMLをinnerTextに置き換えました。私たちはHTMLコードとしてレンダリングされず、プレーンテキストとして扱われますが、この場合は違いはありません。

注： はHTMLでonclick属性とイベントデータオブジェクトを渡すことを忘れないでください：あなたのhtmlで https://jsfiddle.net/57js0ps7/2/

Answer 2

をあなたが個別に各ボタンごとにカウンタを維持する必要がある - ボタンを持っている回数を追跡するために配列を使用しますクリックされました。 2つのボタンを選択してリセットすると、コード内のクリック数varが2になります。

Answer 3

：

このフィドル

<input onclick="clickME(event)" ...> 

チェックアウト

あなたはこれらの50個を持っていると言うことができます

<button type="button" data-clicked="false">1</button> 
<button type="button" data-clicked="false">2</button> 

とあなたのjavascript

var buttons = document.querySelectorAll('button'); 
buttons.forEach(function(button) { 
    button.addEventListener('click', function() { 
    if (this.dataset.clicked == 'false') { 
     this.dataset.clicked = 'true'; 
     this.innerHTML = parseInt(this.innerHTML) + 1; 
    } 
    else { 
     this.dataset.clicked = 'false' 
     this.innerHTML = parseInt(this.innerHTML) - 1; 
    } 
    }) 
}); 

EDITには：あなたはこのここではjQueryとしてタグ付けされているのでここで働いてfiddle

Answer 4

でのjQueryを使用したソリューションです。解決策は、data-属性を使用して各ボタン（入力）のクリック数を保持することです。なぜボタンの代わりに入力を使用するのか分かりませんが、同じままにしておきます

また、各要素を通過してクリック数を表示してその数を表示するgetTotal 。

$(document).ready(function() { 
 
    $(".btn").on("click", clickME); 
 
}); 
 

 
function clickME() { 
 
    var clicks = $(this).data("clicks"); 
 
    var newClicks = parseInt(clicks) + 1; 
 
    if(newClicks > 1){ 
 
    newClicks = 0; 
 
    } 
 
    // set the new click count on the element 
 
    $(this).data("clicks", newClicks); 
 
    setTotal(); 
 
} 
 

 

 
function setTotal(){ 
 
    var total = 0; 
 
    $(".btn").each(function(imdex, btn) { 
 
    var currClicks = parseInt($(btn).data("clicks")); 
 
    total += currClicks; 
 
    }); 
 
    $("#clicks").text(total); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="Button" class="btn" data-clicks=0 value="0" /> 
 
<input type="Button" class="btn" data-clicks=0 value="1" /> 
 
<input type="Button" class="btn" data-clicks=0 value="2" /> 
 
<input type="Button" class="btn" data-clicks=0 value="3" /> 
 
<input type="Button" class="btn" data-clicks=0 value="4" /> 
 
<input type="Button" class="btn" data-clicks=0 value="5" /> 
 
<input type="Button" class="btn" data-clicks=0 value="6" /> 
 

 
<div> 
 
    <p>You've choose <a id="clicks">0</a> slot/s.</p> 
 
</div>