javascript - Why does my change button not work? -
i quite new javascript , learning more html5, javascript , ccs3.
the task have been given:
create chess board use javascript write cells (8x8), , use nth-child change background color in css.
as can see have done that, don’t know if have done in way, going add button change sides (black , white side). have tried solve creating var boolean value, if it’s true load 1 function, , if it’s false another. works in loading page, change button not work. have done wrong?
html , javascript:
<!doctype html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="ccso2.css"> </head> <body> <h1>sjakkbrett</h1> <script> var truefalse = true; function changer(){ if(truefalse === true){ truefalse = false; } else{ truefalse = true; } } var svartbrikke = new array(); svartbrikke [0] = "♜"; svartbrikke [1] = "♞"; svartbrikke [2] = "♝"; svartbrikke [3] = "♛"; svartbrikke [4] = "♚"; svartbrikke [5] = "♝"; svartbrikke [6] = "♞"; svartbrikke [7] = "♜"; svartbrikke [8] = "♟"; var hvitbrikke = new array(); hvitbrikke [0] = "♖"; hvitbrikke [1] = "♘"; hvitbrikke [2] = "♗"; hvitbrikke [3] = "♕"; hvitbrikke [4] = "♔"; hvitbrikke [5] = "♗"; hvitbrikke [6] = "♘"; hvitbrikke [7] = "♖"; hvitbrikke [8] = "♙"; if(truefalse === true){ document.write('<table>'); for(var = 0; < 8; i++){ document.write('<tr align="center">'); for(var j = 0; j < 8; j++){ if(i === 0){ document.write('<td>' + svartbrikke[j] + '</td>'); } if(i === 1){ document.write('<td>' + svartbrikke[8] + '</td>'); } if(i === 6){ document.write('<td>' + hvitbrikke[8] + '</td>'); } if(i === 7){ document.write('<td>' + hvitbrikke[7 - j] + '</td>'); } else if(i >= 2 && <= 5) { document.write('<td> </td>'); } } document.write('</tr>'); } document.write('</table>'); } else { document.write('<table>'); for(var = 0; < 8; i++){ document.write('<tr align="center">'); for(var j = 0; j < 8; j++){ if(i === 0){ document.write('<td>' + hvitbrikke[j] + '</td>'); } if(i === 1){ document.write('<td>' + hvitbrikke[8] + '</td>'); } if(i === 6){ document.write('<td>' + svartbrikke[8] + '</td>'); } if(i === 7){ document.write('<td>' + svartbrikke[7 - j] + '</td>'); } else if(i >= 2 && <= 5) { document.write('<td> </td>'); } } document.write('</tr>'); } document.write('</table>'); } </script> <button onclick="changer();"> bytt side</button> </body> </html> css:
root { display: block; } table{ background-color: lightgray; } tr:nth-child(2n+1) > td:nth-child(2n){ content: center; background-color: white; box-sizing: border-box; width: 40px; height: 40px; } tr:nth-child(2n) > td:nth-child(2n+1){ content: center; background-color: white; box-sizing: border-box; width: 40px; height: 40px; }
you cannot use document.write() after page rendered.
use:
or
to change/add/remove page elements after page rendered.
Comments
Post a Comment