«Переключить» цвета css с чистым Javascript

Я работаю над простой 3-строчной головоломкой, логикой которой я понимаю, но я застреваю, пытаясь создать сетку.«Переключить» цвета css с чистым Javascript

Что я хочу сделать, это изменить цвет фона моих синих плиток на белый, когда щелкнул синий квадрат, и если один и тот же фрагмент снова щелкнут, верните цвет до синего. Я делаю это в чистом javascript.

Моя проблема: я хотел бы иметь возможность изменять цвет столько, сколько необходимо, и в настоящее время я ограничен заменой синего -> белого, а затем белого -> синего без каких-либо изменений. Это повлекло бы за собой зависание пользователя с 3-м выбором.

Какие изменения можно внести, чтобы предотвратить изменение цвета после x количество кликов?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Grid</title> 
<style> 
#blueTile { 
background-color:blue; 
} 
td{ 
      text-align: center; 
     border: 1px solid black; 
     padding: 3px; 
     height:50px; 
     width:50px; 
} 
     table { 
     border-collapse: collapse; 
    } 
</style> 
</head> 
body> 
<script> 

//6x6 array 
var solutionArray = new Array(6); 
    solutionArray[0] = new Array(6); 
    solutionArray[1] = new Array(6); 
    solutionArray[2] = new Array(6); 
    solutionArray[3] = new Array(6); 
    solutionArray[4] = new Array(6); 
    solutionArray[5] = new Array(6); 

    var tile = {}; 
    var blue = tile.colour = "blue"; 
    var white = tile.colour = "white"; 
    var grey = tile.colour = "grey"; 

solutionArray[0][0]=blue; 
solutionArray[0][1]=white; 
solutionArray[0][2]=blue; 
solutionArray[0][3]=blue; 
solutionArray[0][4]=white; 
solutionArray[0][5]=blue; 

solutionArray[1][0]=white; 
solutionArray[1][1]=blue; 
solutionArray[1][2]=white; 
solutionArray[1][3]=blue; 
solutionArray[1][4]=blue; 
solutionArray[1][5]=white; 

solutionArray[2][0]=blue; 
solutionArray[2][1]=white; 
solutionArray[2][2]=blue; 
solutionArray[2][3]=white; 
solutionArray[2][4]=white; 
solutionArray[2][5]=blue; 

solutionArray[3][0]=white; 
solutionArray[3][1]=blue; 
solutionArray[3][2]=white; 
solutionArray[3][3]=white; 
solutionArray[3][4]=blue; 
solutionArray[3][5]=blue; 

solutionArray[4][0]=blue; 
solutionArray[4][1]=blue; 
solutionArray[4][2]=white; 
solutionArray[4][3]=blue; 
solutionArray[4][4]=white; 
solutionArray[4][5]=white; 

solutionArray[5][0]=blue; 
solutionArray[5][1]=white; 
solutionArray[5][2]=blue; 
solutionArray[5][3]=white; 
solutionArray[5][4]=blue; 
solutionArray[5][5]=white; 



    var x = document.createElement("TABLE"); 
    x.setAttribute("id", "gridTable"); 
    document.body.appendChild(x); 


    for(i=0;i<6;i++) 
    { 
     //output the row tag 
     var y = document.createElement("TR"); 
     y.setAttribute("id", "row"+i); 
     document.getElementById("gridTable").appendChild(y) 

     for(j=0;j<solutionArray.length;j++) 
     { 

      ///output the td tag 
      var z = document.createElement("TD"); 
      if(solutionArray[i][j] == blue){ 
      z.setAttribute("id", "blueTile"); 
      } 
      else if (solutionArray[i][j] == white){ 
      z.setAttribute("id", "whiteTile"); 

      } 
      var t = document.createTextNode(solutionArray[i][j]); 
      z.appendChild(t); 
      document.getElementById("row"+i).appendChild(z); 


     } 

    } 

    var blueClick = document.getElementById("blueTile"); 
    blueClick.addEventListener("click", switchColor); 

    function switchColor(){ 
    blueClick.style.backgroundColor = "white"; 
    blueClick.addEventListener("click", switchBack); 
    } 

    function switchBack(){ 
    blueClick.style.backgroundColor = "blue"; 
    blueClick.addEventListener("click", switchColor); 

    } 



</script> 

</body> 
</html>

источник

2016-10-19 Jeremy Stone

Два элемента не могут иметь одинаковый идентификатор. Идентификаторы должны быть глобально уникальными, использовать классы. – tcooc

Вы можете сделать что-то подобное.

//6x6 array 
 
var solutionArray = new Array(6); 
 
solutionArray[0] = new Array(6); 
 
solutionArray[1] = new Array(6); 
 
solutionArray[2] = new Array(6); 
 
solutionArray[3] = new Array(6); 
 
solutionArray[4] = new Array(6); 
 
solutionArray[5] = new Array(6); 
 

 
var tile = {}; 
 
var z = ""; 
 
var blue = tile.colour = "blue"; 
 
var white = tile.colour = "white"; 
 
var grey = tile.colour = "grey"; 
 

 
solutionArray[0][0] = blue; 
 
solutionArray[0][1] = white; 
 
solutionArray[0][2] = blue; 
 
solutionArray[0][3] = blue; 
 
solutionArray[0][4] = white; 
 
solutionArray[0][5] = blue; 
 

 
solutionArray[1][0] = white; 
 
solutionArray[1][1] = blue; 
 
solutionArray[1][2] = white; 
 
solutionArray[1][3] = blue; 
 
solutionArray[1][4] = blue; 
 
solutionArray[1][5] = white; 
 

 
solutionArray[2][0] = blue; 
 
solutionArray[2][1] = white; 
 
solutionArray[2][2] = blue; 
 
solutionArray[2][3] = white; 
 
solutionArray[2][4] = white; 
 
solutionArray[2][5] = blue; 
 

 
solutionArray[3][0] = white; 
 
solutionArray[3][1] = blue; 
 
solutionArray[3][2] = white; 
 
solutionArray[3][3] = white; 
 
solutionArray[3][4] = blue; 
 
solutionArray[3][5] = blue; 
 

 
solutionArray[4][0] = blue; 
 
solutionArray[4][1] = blue; 
 
solutionArray[4][2] = white; 
 
solutionArray[4][3] = blue; 
 
solutionArray[4][4] = white; 
 
solutionArray[4][5] = white; 
 

 
solutionArray[5][0] = blue; 
 
solutionArray[5][1] = white; 
 
solutionArray[5][2] = blue; 
 
solutionArray[5][3] = white; 
 
solutionArray[5][4] = blue; 
 
solutionArray[5][5] = white; 
 

 
var x = document.createElement("TABLE"); 
 
x.setAttribute("id", "gridTable"); 
 
document.body.appendChild(x); 
 

 
for (i = 0; i < 6; i++) { 
 
    //output the row tag 
 
    var y = document.createElement("TR"); 
 
    y.setAttribute("id", "row" + i); 
 
    document.getElementById("gridTable").appendChild(y) 
 

 
    for (j = 0; j < solutionArray.length; j++) { 
 

 
    ///output the td tag 
 
    var z = document.createElement("TD"); 
 
    if (solutionArray[i][j] == blue) { 
 
     z.setAttribute("class", "blueTile tile blue"); 
 
    } else if (solutionArray[i][j] == white) { 
 
     z.setAttribute("class", "whiteTile tile"); 
 

 
    } 
 
    var t = document.createTextNode(solutionArray[i][j]); 
 
    z.appendChild(t); 
 
    document.getElementById("row" + i).appendChild(z); 
 

 
    } 
 

 
} 
 

 
document.querySelector("#gridTable").addEventListener("click", function(event) { 
 
    if (event.target.tagName === "TD" && event.target.classList.contains("blueTile")) { 
 
    event.target.classList.toggle("blue"); 
 
    } 
 
});

.blue { 
 
    background-color: blue; 
 
} 
 
td { 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    padding: 3px; 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
} 
 
.tile { 
 
    cursor: pointer; 
 
} 
 
.whiteTile { 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    cursor: default; 
 
}

источник

2016-10-19 18:12:50 Sreekanth

Вы, вероятно, хотите, чтобы изменить вверх, как вы делаете переключение. Вместо того, чтобы иметь две отдельные функции, просто выполните следующие действия для одного обработчика кликов, никаких щелчков по плитке.

function switchColor(e){ 
    var curColor = this.style.backgroundColor; 
    if(curColor === "white"){ 
     this.style.backgroundColor = "blue"; 
    } 
    else{ 
     this.style.backgroundColor = "white"; 
    } 
}

Кроме того, идентификаторы должны быть уникальными для элемента. Однако вы используете их как класс css в своем примере. Вот скрипка с ее реализацией. https://jsfiddle.net/6su0b0w8/

источник

2016-10-19 18:18:11

«Переключить» цвета css с чистым Javascript

ответ

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