HTMLテーブルの最初のクリックでonclick（）が機能しない

Question

したがって、HTMLの<table>要素を使用して5x5グリッドを作成しました。クリックされたときに各セルが赤くなり、そうでないときには白に戻るようにします。各セルの最初のクリックを検出しないようです。最初のクリックがトリガーされると、通常は1回のクリックで赤と白の表示が交互に切り替わりますが、最初のクリックをクリックすると応答しません。セルが2度クリックされた後の最初のクリックで応答するのはなぜですか？それまで触れていない場合は、最初のクリックで反応しません。

HTMLスニペット：

<div class="board"> 
<table type="board"> 
<tr> 
     <td id="r1-c1" onclick="changeColor('r1-c1')"></td> 
     <td id="r1-c2" onclick="changeColor('r1-c2')"></td> 
     <td id="r1-c3" onclick="changeColor('r1-c3')"></td> 
     <td id="r1-c4" onclick="changeColor('r1-c4')"></td> 
     <td id="r1-c5" onclick="changeColor('r1-c5')"></td> 
</tr> 
... 
</table> 
</div> 
<button id="submit" onclick="submitted()">Generate</button> 

スニペットはそれぞれ、本体と2 divタグ内にネストされます。

CSSスニペット：

table[type=board],tr,td{ 
    background-color: white; 
    min-width: 80px; 
    min-height: 380px; 
    border: 2px solid black; 
    text-align: center; 
    font-size: 25px; 
    margin: 0px; 
} 

JSコード：

function changeColor(id) 
{ 
    if(document.getElementById(id).style.backgroundColor == "white"){ 
     document.getElementById(id).style.backgroundColor = "red"; 
    }else{ 
     document.getElementById(id).style.backgroundColor = "white"; 
    } 
} 

Answer 1

は、次のコードを使用してください。それが動作します。

function changeColor(id){ 
    if((document.getElementById(id).style.backgroundColor == "white") || (document.getElementById(id).style.backgroundColor == "")){ 
     document.getElementById(id).style.backgroundColor = "red"; 
    }else{ 
     document.getElementById(id).style.backgroundColor = "white"; 
    } 

} 

Answer 2

あなたはHTMLを提供していないので、DOMを作成する必要があります。

document.getElementById(id).style.backgroundColor 

各セルにIDがあるとは限りませんか？

大きなグリッドでは複雑すぎる可能性があります。代わりに、rowIndex & cellIndexを使用して、特定のセルを特定する必要があります。

eventオブジェクトも使用でき、targetが見つかります。私たちは、イベントがトリガなっているかを確認しない限り、それはevent.targetが

var getTable = document.getElementById("demoTable"); 
//Declare a variable to hold the cellIndex & rowIndex 
// On next click check if this values,& if not null change the background color of that cell 
var col = ""; 
var row = ""; 
getTable.addEventListener('click',function(event){ 
    console.log(col,row) 
    if(col !== "" && row !== ""){ 
    document.getElementById('demoTable').rows[row].cells[col].style.backgroundColor ="transparent" ; 
    } 
    col = event.target.cellIndex; 
    row = event.target.parentNode.rowIndex; 



//Set background of the cell on which it is clicked 

    document.getElementById('demoTable').rows[row].cells[col].style.backgroundColor ="red" ; 
    }) 

JSFIDDLE