最初のものに影響を与えずに別のdivの背景を変更する方法

Question

基本的に1から50までの番号を持つこのボードを作る必要があり、1つの番号をクリックするたびにその背景が別の色に変わります。私は<div>クリック可能にすることにより最初の1でそれを行うことができたが、私は2は、ここに私のコードです値を持つようになっている秒1でそれを行う方法がわからない

var Color = "#FF0"; 
 

 
function theFunction() { 
 
    if (Color == '#FF0') { 
 
    Color = '#F00'; 
 
    } else { 
 
    Color = '#FF0'; 
 
    } 
 

 
    document.getElementById('choose').style.backgroundColor = Color; 
 

 
}

div#gameboard { 
 
    background: #CCC; 
 
    border: #999 2px solid; 
 
    width: 1200px; 
 
    height: 900px; 
 
    margin: 70px; 
 
    margin-top: 40px; 
 
}

<div id="gameboard"> 
 
    <div id="choose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();"> 
 
    1 
 
    </div> 
 
    <div id="chose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();"> 
 
    2 
 
    </div> 
 
</div>

だから、私は2番目のdivのために何をしますか？ありがとう

Answer 1

これを試してください。

<div id="choose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();"> 

Answer 2

最も簡単な方法は、あなたの「数」のdivからIDを削除CSSにすべてのあなたのスタイリングのコードを移動し、あなたが知っているように、onclickイベントにthisに渡すようにしてくださいすることがある数divがクリックされました。その後、clickedクラスを追加すると、適用時に背景が赤くなり、JavaScriptは単にclickedクラスの追加/削除を切り替えます。

function theFunction(e) { 
 
    e.classList.toggle("clicked"); 
 
}

#gameboard { 
 
    background: #CCC; 
 
    border: #999 2px solid; 
 
    width: 1200px; 
 
    height: 900px; 
 
    margin: 70px; 
 
    margin-top: 40px; 
 
} 
 
#gameboard div { 
 
    width: 240px; 
 
    height: 150px; 
 
    margin-left: 30px; 
 
    margin-top: 50px; 
 
    background-color: #FF0; 
 
    cursor: pointer; 
 
    font-size: 130px; 
 
    text-align: center; 
 
} 
 

 
#gameboard div.clicked { 
 
    background-color: #F00; 
 
}

<div id="gameboard"> 
 
    <div onclick="theFunction(this);"> 
 
    1 
 
    </div> 
 
    <div onclick="theFunction(this);"> 
 
    2 
 
    </div> 
 
</div>

これは、現在、現代のブラウザで動作します。古いバージョンのIE（つまり< IE10）をサポートする必要がある場合は、clickedクラスの存在をテストするためにJavaScriptをわずかに変更し、それに応じて追加または削除する必要があります。

clickedクラスの追加と削除を簡単に切り替えることができ、フレームワーク内ですべてのブラウザ互換コードを隠すことができるjQueryのようなフレームワークの使用を検討することもできます。

Answer 3

この

onclick="theFunction(this);" 

にお奨め変更

onclick="theFunction();" 

まずあなたそしてあなたの関数は、パラメータがクリックされた要素であることをパラメータ

function theFunction(element) { 
    [...] 
    element.style.backgroundColor=Color; 
} 

を受け入れます。