onclick() не работает над первым кликом для таблицы HTML

-2

Итак, я создал сетку 5x5, используя элемент HTML <table>. Я хочу, чтобы каждая ячейка стала красной, когда она была нажата, и верните ее обратно в белый цвет, когда это не так. Похоже, что он не обнаружит первый клик по каждой ячейке. Как только первый клик был запущен, он чередуется с красным и белым, как правило, под 1 кликом, но когда вы нажимаете его в первый раз для этого экземпляра, он не отвечает. Почему ячейка реагирует на первый клик после того, как дважды нажата, но не отвечает на первый клик, если он никогда не касался раньше?onclick() не работает над первым кликом для таблицы HTML

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

источник

2016-06-14 btrballin

не может помочь вам, если мы не увидим, как это событие становится срабатывают. –

Я думаю, что первый элемент element.style.backgroundColor не задан так: document.getElementById (id) .style.backgroundColor == "white" 'false как' document.getElementById (id) .style.backgroundColor === undefined ', он входит в другое и устанавливает фон в« белый ». вы можете решить эту проблему, либо проверив, если не определено, либо установите красный цвет или переключите условие (если (красный) белый, а другой - красный;). –

Проверьте, не требуется ли использовать css при начальной загрузке. Если это не так, у вас есть проверка на неопределенное свойство также – SESN

Используйте следующий код. Это будет работать.

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

}

источник

2016-06-14 04:53:19 SESN

Большое спасибо. Это очень простое решение устранило проблему. Спасибо, что узнали об этом в ограниченном количестве кода, который я предоставил. Но мне интересно, почему цвет фона во время первого клика не определен, но не после первого щелчка на этой ячейке? – btrballin

U не задали цвет фона первоначально в css. Если u не задает специфическое свойство, вызов через javascript дает значение u NULL. – SESN

Хм ... Я установил свойство 'background-color' в CSS как белый, но у меня все еще есть ошибка. – btrballin

Вы не предоставили HTML, поэтому мне нужно создать DOM.

document.getElementById(id).style.backgroundColor

Вы хотите сказать, что каждая ячейка имеет идентификатор?

Может быть слишком сложным для большой сетки. Вместо этого вы должны использовать 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

источник

2016-06-14 05:13:10 brk

onclick() не работает над первым кликом для таблицы HTML

ответ

Смежные вопросы