Javascript onclick（）不处理HTML表的首次单击

因此，我使用HTML的

元素制作了一个5x5网格。我希望每个单元格在单击时变为红色，而在未单击时变回白色。看起来它不会检测到第一次点击每个单元格。一旦第一次点击被触发，它通常会在一次点击下从红色和白色交替出现，但是当你第一次点击它时，它不会响应。为什么一个单元格在被点击两次后会在第一次点击时做出响应，而如果它以前从未被触摸过，它在第一次点击时不会做出响应

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>

JS代码：

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

---

使用以下代码。它会起作用的

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";
    }

}

---

您没有提供HTML，因此我必须创建DOM

document.getElementById(id).style.backgroundColor 

你是说每个单元格都有一个id吗

这对于大型网格来说可能太复杂了。相反，您应该使用

rowIndex

和

cellIndex

来定位特定的单元格

您还可以使用

事件

对象并查找

目标

。说它意味着

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" ;  
    })

---

除非我们看到事件是如何触发的，否则无法帮助您。我认为第一时间元素.style.backgroundColor没有设置，因此

document.getElementById（id）。style.backgroundColor==“white”

为false，因为

document.getElementById（id）。style.backgroundColor==未定义的
，它输入else并将背景设置为“白色”。您可以通过检查是否未定义并将其设置为红色或切换条件（如果（红色）白色；否则为红色；）来解决此问题。请检查您是否在初始加载时应用css。如果没有，请检查未定义的属性。非常感谢您。这个非常简单的解决方案解决了此问题。感谢您在我提供的有限代码中识别它。但我想知道，为什么第一次单击时背景颜色未定义，而不是在第一次单击c之后点击那个单元格？你最初没有在css中设置背景色。如果你没有设置特定属性，通过javascript调用会给你空值。嗯……我确实在css中将
background color
属性设置为白色，但我仍然得到了错误。我的问题是，为什么第二次点击它时背景色会为白色，而不是白色在第一次点击时？你能把你的代码放在小提琴里吗？这样任何人都能看到它
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" ;  
    })