"Toggle" css Farben mit reinem Javascript

Ich arbeite an einem einfachen 3 in einer Reihe Puzzle-Spiel, die Logik, von der ich verstehe, aber ich bin stecken bleiben versuchen, mein Gitter zu erstellen."Toggle" css Farben mit reinem Javascript

Ich möchte die Hintergrundfarbe meiner blauen Kacheln beim Klicken auf ein blaues Quadrat in Weiß ändern, und wenn die gleiche Kachel erneut angeklickt wird, wird die Farbe wieder in blau geändert. Ich mache das in reinem Javascript.

Mein Problem: Ich möchte die Farbe so oft wie nötig ändern können, und ich bin derzeit beschränkt auf blau -> weiß, und dann weiß -> blau ohne weitere Änderung. Dies würde einen Benutzer im Wesentlichen bei seiner dritten Wahl hängen lassen.

Welche Änderungen kann ich vornehmen, um zu verhindern, dass die Farbänderung nach x Anzahl der Klicks stoppt?

<!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>

Quelle

2016-10-19 Jeremy Stone

Zwei Elemente können nicht dieselbe ID haben. IDs müssen global eindeutig sein und Klassen verwenden. – tcooc

Sie könnten so etwas tun.

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

Quelle

2016-10-19 18:12:50 Sreekanth

Sie wahrscheinlich ändern möchten auf, wie Sie die Schalt tun. Statt zwei separate Funktionen zu verwenden, führen Sie einfach Folgendes für einen einzelnen Klick-Handler aus, ohne dass ein Kachelklick erfolgt.

Außerdem sollen IDs für das Element eindeutig sein. Sie verwenden sie jedoch in Ihrem Beispiel wie eine CSS-Klasse. Hier ist eine Geige mit einer Implementierung davon. https://jsfiddle.net/6su0b0w8/

Quelle

2016-10-19 18:18:11

"Toggle" css Farben mit reinem Javascript

Antwort

Verwandte Themen