Javascriptを使用したスコアカウンタ

Question

私はJavascriptが本当に新しく、私は簡単なプロジェクトのためにスコアカウンタ機能を作りたいと思っています。これを達成するために2つの機能を同じ目的で使用しましたが、2つのチームに同じ機能を使用したいと考えています。私はここにコードを入れます。

var scr1 = document.getElementById('button1'); 
 
var scr2 = document.getElementById('button2'); 
 
var i = 1; 
 

 
function buttonClick() { 
 
    document.getElementById('inc', 'inc2').value = i++; 
 
}

<div id="scorebox1"> 
 
    <button id="button1" onclick="buttonClick()">+1 Team 1 </button> 
 
    <input type="text" id="inc" value="0"> </input> 
 
</div> 
 

 

 
<div id="scorebox2"> 
 
    <button id="button2" onclick="buttonClick()">+1 Team 2</button> 
 
    <input type="text" id="inc2" value="0"></input> 
 
</div>

私は機能やパラメータに完全に新たなんだと私は今、長い時間のためにGoogleで用語を検索したが、実際に進出する方法がわかりません。ヘルプは非常に高く評価されます。既存のコードを使用して

乾杯と感謝、 J.

Answer 1

は、あなたがボタン

onclick="buttonClick('inc') 

から関数にターゲットの識別子を渡すと目標値を増やすことができ、直接

document.getElementById(target).value++; 

以下の例の冗長コードを削除して、関連コードのみを表示しました。

function buttonClick(target) { 
 
    document.getElementById(target).value++; 
 
}

<div id="scorebox1"> 
 
    <button id="button1" onclick="buttonClick('inc')">+1 Team 1 </button> 
 
    <input type="text" id="inc" value="0"> </input> 
 
</div> 
 

 

 
<div id="scorebox2"> 
 
    <button id="button2" onclick="buttonClick('inc2')">+1 Team 2</button> 
 
    <input type="text" id="inc2" value="0"></input> 
 
</div>

Answer 2

何が欲しいの増加のポイントを取得する必要がありますどのチームを区別するための機能のための方法です。これは、クリックされたボタンに応じて異なるパラメータを関数に送信することで実行できます。

function buttonClick(team) { 
 
    if (team == 'team1') { 
 
     var input = document.getElementById('inc'); 
 
     input.value++; 
 
    } 
 
    if (team == 'team2') { 
 
     var input = document.getElementById('inc2'); 
 
     input.value++; 
 
    } 
 
}

<div id = "scorebox1"> 
 
    <button id="button1" onclick="buttonClick('team1')">+1 Team 1 </button> 
 
    <input type="text" id="inc" value= "0"> </input> 
 
</div> 
 

 

 
<div id="scorebox2"> 
 
    <button id="button2" onclick="buttonClick('team2')">+1 Team 2</button> 
 
    <input type="text" id="inc2" value="0"></input> 
 
</div>

Answer 3

あなたは関数にhtml要素を渡して、このようにそれを行うことができます。 htmlが異なる場合は、nextElementSibling以外のものが必要な場合があります。

function buttonClick(element) { 
 
    element.nextElementSibling.value++; 
 
}

<div id="scorebox1"> 
 
    <button id="button1" onclick="buttonClick(this)">+1 Team 1 </button> 
 
    <input type="text" id="inc" value="0"> </input> 
 
</div> 
 

 

 
<div id="scorebox2"> 
 
    <button id="button2" onclick="buttonClick(this)">+1 Team 2</button> 
 
    <input type="text" id="inc2" value="0"></input> 
 
</div>