I created a table derived from an array, but I don't understand how to create a function that will overwrite an object in my array when editing on the page. You can run the worker code.
There was an idea to give all the cells id by their key and then somehow create a function for editing them, but I can't do it. :(
window.onload = function() {
document.querySelector('.bottom_panel > .plus').addEventListener('click', plusRow);
document.querySelector('.bottom_panel > .minus').addEventListener('click', minusRow);
document.querySelector('.right_panel > .plus').addEventListener('click', plusСolumn);
document.querySelector('.right_panel > .minus').addEventListener('click', minusСolumn);
// document.querySelectorAll('td > #0_0').addEventListener('oninput', alert);
const tbody = document.querySelector("tbody")
// function alert() {
// alert("11")
// }
array = [
[1,2,3,4],
[5,6,7,8],
[9,10,11,12],
[13,14,15,16]
];
let N = ''
let amountRow = array.length
newRow = []
let amountСolumn = array[0].length
console.log(amountСolumn)
function tableBuilder() {
tbody.textContent = ""
for (i = 0; i < array.length; i++) {
var tr = document.createElement('tr')
for (j = 0; j < array[i].length; j++) {
var td = document.createElement('td')
td.innerHTML = `<input id="` + i + `_` + j + `" type="text" value="` + array[i][j] + `">`
tr.appendChild(td)
}
tbody.appendChild(tr)
}
}
tableBuilder()
function plusRow() {
for (i = 0; i < array[0].length; i++) {
newRow.push('')
console.log(newRow)
}
array.push(newRow)
amountRow = array.length
console.log(array)
newRow = []
tableBuilder()
}
function minusRow() {
if (amountRow > 1) {
array.pop()
amountRow = array.length
console.log(amountRow)
} else {
alert("Nope!")
}
tableBuilder()
}
function plusСolumn() {
for ( i = 0; i < array.length; i++) {
array[i].push(N)
}
console.log(array)
amountСolumn = array[0].length
tableBuilder()
}
function minusСolumn() {
if (amountСolumn > 1) {
for ( i = 0; i < array.length; i++) {
array[i].pop()
}
amountСolumn = array[0].length
tableBuilder()
} else {
alert("Nope!")
}
}
}
// for (i = 0; i < array[0].length; i++) {
// rowNumber = array[i]
// for (k = 0; k < rowNumber.length; k++)
// point = rowNumber[k]
// console.log(rowNumber[k])
// tbody.innerHTML += `<div>` + point + `</div>`
// }
body {
display: flex;
justify-content: center;
margin: 20vh 0 0 0;
}
table {
border-collapse: collapse;
}
td {
text-align: center;
width: 100px;
height: 35px;
border: black 1px solid;
}
td:hover, input:hover {
cursor: pointer;
background: silver;
}
td:hover input {
cursor: pointer;
background: silver;
}
input {
margin: 1px 0 0 0;
border: none;
width: 90%;
height: 90%;
}
input:focus {
border: 1px #000 solid;
outline:none;
background: none !important;
}
button {
cursor: pointer;
width: 35px;
height: 20px;
}
.minus {
margin: 0 0 0 10px;
}
.bottom_panel {
display: flex;
justify-content: center;
margin: 20px 0 0 0;
}
.right_panel {
display: flex;
justify-content: center;
align-items: center;
margin: -3% 0 0 20px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="style.css" rel="stylesheet">
<title>Spreadsheet</title>
<script src="script.js"></script>
</head>
<body>
<div class="table">
<table>
<tbody>
</tbody>
</table>
<div class="bottom_panel">
<button class="plus">+</button>
<button class="minus">-</button>
</div>
</div>
<div class="right_panel">
<button class="plus">+</button>
<button class="minus">-</button>
</div>
<script src="script.js"></script>
</body>
</html>
<!--<tr>-->
<!-- <td><input class="input" type="text" value="1" readonly="true" ondblclick="this.readOnly='';"></td>-->
<!-- <td><input type="text" value="2"></td>-->
<!-- <td><input class="input" type="text" value="3"></td>-->
<!--</tr>-->
Related
I am making a 4x4 wordle game, and I used js to make the squares and input letters. When I input letters they go top to bottom instead of left to right and I'm not really sure how to fix it. I don't know how to modify the key events to go from the first column to the second, this is the code that deals with it, but I don't know why it isn't working, i feel like the code that is affecting it is this, but im not sure
if (col < gameWidth) {
let currsquare = document.getElementById(row.toString() + '-' + col.toString());
currsquare.innerText = e.code[3];
col++;
}
var gameHeight = 4; //number of guesses
var gameWidth = 4; //length of the word
var row = 0; //current guess (attempt #)
var col = 0; //current letter for that attempt
var gameOver = false;
var word = "RAAA";
window.onload = function() {
initialize();
};
function initialize() {
const darkModeToggle = document.getElementById("dark-mode-toggle");
darkModeToggle.addEventListener("click", () => {
document.body.classList.toggle("dark");
});
const instructionsToggle = document.getElementById("info");
const instructionsContainer = document.getElementById("instructions-container");
// Hide the instructions by default
instructionsContainer.style.display = "none";
// Show or hide the instructions when the button is clicked
instructionsToggle.addEventListener("click", () => {
if (instructionsContainer.style.display === "none") {
instructionsContainer.style.display = "block";
} else {
instructionsContainer.style.display = "none";
}
});
// Create the game board
for (let i = 0; i < gameHeight; i++) {
let row = document.createElement("div");
row.classList.add("row");
for (let j = 0; j < gameWidth; j++) {
let square = document.createElement("span");
square.id = i.toString() + "-" + j.toString();
square.classList.add("square");
square.innerText = "";
row.appendChild(square);
}
document.getElementById("board").appendChild(row);
}
// Listen for Key Press
document.addEventListener("keyup", (e) => {
if (gameOver) return;
if ("KeyA" <= e.code && e.code <= "KeyZ") {
if (col < gameWidth) {
let currsquare = document.getElementById(row.toString() + '-' + col.toString());
currsquare.innerText = e.code[3];
col++;
}
} else if (e.code == "Backspace") {
if (col > 0) {
col--;
let currsquare = document.getElementById(row.toString() + '-' + col.toString());
currsquare.innerText = "";
}
} else if (e.code == "Enter") {
update();
row += 1; // start new row
col = 0; // reset current index to 0 for new row
}
if (!gameOver && row == gameHeight) {
gameOver = true;
document.getElementById("answer").innerText = word;
}
});
}
function update() {
let correct = 0;
for (let column = 0; column < gameWidth; column++) {
let currsquare = document.getElementById(row.toString() + '-' + column.toString());
let letter = currsquare.innerText;
// Is it in the correct position?
if (word[row*gameWidth + (column % gameWidth)] == letter) {
currsquare.classList.add("correct");
correct += 1;
} // Is it in the word?
else if (word.includes(letter)) {
currsquare.classList.add("present");
} // Not in the word
else {
currsquare.classList.add("absent");
}
}
if (correct == gameWidth) {
gameOver = true;
document.getElementById("congrats").style.display = "block";
}
if (!gameOver && row == gameHeight - 1) {
gameOver = true;
document.getElementById("answer").innerText = word;
}
}
this is the updated html
<html>
<head>
<title>Wordle</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link rel="stylesheet" href="wordle.css">
</head>
<body>
<h1 id="title">Wordle</h1>
<i id = "info" class="fas fa-info-circle"></i>
<i id="dark-mode-toggle" class="fas fa-circle"></i>
<hr>
<br>
<div id="board">
</div>
<br>
<div id="instructions-container">
<p>The goal is to guess the word </p>
</div>
<img id="congrats" src="https://res.cloudinary.com/mkf/image/upload/v1675467141/ENSF-381/labs/congrats_fkscna.gif" alt="Congratulations">
<script src="wordle.js"></script>
</html>
This is the updated css
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
--correct:#6baa64;
--background-color:white;
--text-color:black;
color: var(--text-color);
background-color: var(--background-color);
}
body.dark{
font-family: Arial, Helvetica, sans-serif;
text-align: center;
--correct:#6baa64;
--background-color:black;
background-color: var(--background-color);
--text-color:white;
color:white;
}
hr {
width: 500px;
}
#title {
font-size: 36px;
font-weight: bold;
letter-spacing: 2px;
}
#board {
width: 350px;
height: 420px;
margin: 0 auto;
margin-top: 3px;
display: flex;
flex-wrap: wrap;
}
.square {
border: 2px solid lightgray;
width: 60px;
height: 60px;
margin: 2.5px;
color: black;
font-size: 36px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.correct {
background-color: var(--correct);
color: white;
border-color: white;
}
.present {
background-color: #C9B458;
color: white;
border-color: white;
}
.absent {
background-color: #787C7E;
color: white;
border-color:white;
}
#congrats {
display: none;
}
#dark-mode-toggle {
position: fixed;
top: 10px;
right: 250px;
}
#question{
position: fixed;
top: 10px;
right: 200px;
}
#info{
position: fixed;
top: 10px;
right: 300px;
}
You dont need display: flex; in board but you need to add display: flex; to row
#board {
width: 350px;
height: 420px;
margin: 0 auto;
margin-top: 3px;
}
.row {
display: flex;
}
I wrote this code where the list item to be added stay in the top of the list, and the order should actualize the just like the variable, but it doens't change, it remains 1
window.addEventListener('keydown', addItem)
var order = 1;
var listItem = [""];
var listQuantity = [0];
var orderin = document.getElementById('order-register');
orderin.innerHTML = order;
function addItem() {
let itemout, qttout, addrow;
let table = document.getElementById('tabelaitens');
let itemin = document.getElementById('itemin');
let qttin = document.getElementById('qttin');
let key = event.key;
if (key == "Enter") {
if (itemin.value != "") {
itemout = itemin.value;
} else {
//add dropdown
}
if (qttin.value > 0) {
qttout = qttin.value;
} else {
//add dropdown
}
if ((itemout != undefined) && (qttout != undefined)) {
orderin.innerHTML = '' + order;
addrow = "<td class=\"order\">" + order + "</td><td class=\"item\">" + itemout + "</td><td class=\"quantity\">" + qttout + "</td>";
table.innerHTML += addrow;
order++;
orderin.innerHTML = order;
}
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
table,
tr,
td {
border-collapse: collapse;
}
#tabelaitens {
background-color: blanchedalmond;
width: 1000px;
margin: auto;
}
.linha,
.linharegister {
border-collapse: collapse;
}
.order {
width: 5%;
padding: 10px;
text-align: center;
}
.item {
width: 85%;
padding: 10px 5px;
}
.quantity {
width: 10%;
padding: 10px 5px;
}
#order-register {
text-align: center;
}
#order-register,
.item-register,
.quantity-register {
padding: 5px
}
.item-register>input,
.item-register>input:focus,
.quantity-register>input,
.quantity-register>input:focus {
width: 100%;
background-color: transparent;
border: none;
outline: none;
border-bottom: solid rgb(196, 183, 164);
}
.quantity-register>input {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista de Compras</title>
<link rel="icon" href="img/list.png">
<link rel="stylesheet" href="styletable.css">
<script src="javascript/addlist.js" defer></script>
</head>
<body>
<main>
<ul>
<h1>
<li id="listname">lista</li>
</h1>
</ul>
<table id="tabelaitens">
<tr class="linha">
<td class="order">Ordem</td>
<td class="item">Item</td>
<td class="quantity">Quantidade</td>
</tr>
<tr class="linharegister">
<form>
<td id="order-register">PH</td>
<td class="item-register"><input id="itemin" type="text" name="itemregister" autocomplete="off"></td>
<td class="quantity-register"><input id="qttin" type="number" name="itemregister" autocomplete="off" min="1"></td>
</form>
</tr>
</table>
</main>
</body>
I tried make the var turn into a let, put the value in innerHTML outside the if, and a lot of small things that didn't changed anything at all. I dont know if it is an error in the syntax, logic or whatever, but one thing is right, there is no ";" missing.
You're creating invalid HTML because you don't have <tr> around the new row that you're adding. The browser is trying to fix it, but it ends up putting the added row at the beginning instead of the end. Add this and you get the desired result.
window.addEventListener('keydown', addItem)
var order = 1;
var listItem = [""];
var listQuantity = [0];
var orderin = document.getElementById('order-register');
orderin.innerHTML = order;
function addItem() {
let itemout, qttout, addrow;
let table = document.getElementById('tabelaitens');
let itemin = document.getElementById('itemin');
let qttin = document.getElementById('qttin');
let key = event.key;
if (key == "Enter") {
if (itemin.value != "") {
itemout = itemin.value;
} else {
//add dropdown
}
if (qttin.value > 0) {
qttout = qttin.value;
} else {
//add dropdown
}
if ((itemout != undefined) && (qttout != undefined)) {
addrow = "<tr><td class=\"order\">" + order + "</td><td class=\"item\">" + itemout + "</td><td class=\"quantity\">" + qttout + "</td><tr>";
table.innerHTML += addrow;
order++;
orderin.innerHTML = order;
}
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
table,
tr,
td {
border-collapse: collapse;
}
#tabelaitens {
background-color: blanchedalmond;
width: 1000px;
margin: auto;
}
.linha,
.linharegister {
border-collapse: collapse;
}
.order {
width: 5%;
padding: 10px;
text-align: center;
}
.item {
width: 85%;
padding: 10px 5px;
}
.quantity {
width: 10%;
padding: 10px 5px;
}
#order-register {
text-align: center;
}
#order-register,
.item-register,
.quantity-register {
padding: 5px
}
.item-register>input,
.item-register>input:focus,
.quantity-register>input,
.quantity-register>input:focus {
width: 100%;
background-color: transparent;
border: none;
outline: none;
border-bottom: solid rgb(196, 183, 164);
}
.quantity-register>input {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista de Compras</title>
<link rel="icon" href="img/list.png">
<link rel="stylesheet" href="styletable.css">
<script src="javascript/addlist.js" defer></script>
</head>
<body>
<main>
<ul>
<h1>
<li id="listname">lista</li>
</h1>
</ul>
<table id="tabelaitens">
<tr class="linha">
<td class="order">Ordem</td>
<td class="item">Item</td>
<td class="quantity">Quantidade</td>
</tr>
<tr class="linharegister">
<form>
<td id="order-register">PH</td>
<td class="item-register"><input id="itemin" type="text" name="itemregister" autocomplete="off"></td>
<td class="quantity-register"><input id="qttin" type="number" name="itemregister" autocomplete="off" min="1"></td>
</form>
</tr>
</table>
</main>
</body>
I have implemented a memory game. If we set grid as 2 here then when score reaches 2 although classes for highlight are added and removed but these are not reflected on UI. Why is this happening. Also any suggestions for implementing the logic in a better manner.
function showSequence - classList - add/remove
gridEl = document.getElementById('grid')
mainEl = document.querySelector(".main")
scoreEl = document.querySelector("#score")
highScoreEl = document.querySelector("#hscore")
gridSize = 5
score = 0
highScore = 0
gameOver = false
showingSequence = false
qu = []
function createGrid() {
mainEl.innerHTML = ''
// gridSize = Number(gridEl.value)+Number(score)+1
gridSize = Number(gridEl.value)
console.log('gridSize', gridSize)
// let color = `rgba(${Math.floor(Math.random()*360)},${Math.floor(Math.random()*360)},${Math.floor(Math.random()*360)})`
for (let i = 0; i < 1; i++) {
let rowWrapper = document.createElement('div')
rowWrapper.dataset.row = i
rowWrapper.classList.add('row')
for (let j = 0; j < gridSize; j++) {
let box = document.createElement('div')
box.dataset.col = j
box.classList.add('box')
// box.style.background = color
rowWrapper.appendChild(box)
}
mainEl.appendChild(rowWrapper)
}
}
function resetGame() {
score = 0
scoreEl.innerText = "Score: " + score
qu = []
}
function increaseScore() {
score++;
scoreEl.innerText = "Score: " + score
if (score > highScore) {
highScore = score
highScoreEl.innerText = "High Score: " + score
}
}
function over(r, c) {
document.querySelector(`[data-row='${r}']`).querySelector(`[data-col='${c}']`).classList.add('highlight-danger')
mainEl.classList.add('shake')
setTimeout(() => {
mainEl.classList.remove('shake')
score = 0
qu = []
}, 500)
}
function handleGridClick(event) {
if (showingSequence)
return
let col = event.target.dataset.col
let row = event.target.parentElement.dataset.row
if (qu[0][0] == row && qu[0][1] == col) {
document.querySelector(`[data-row='${row}']`).querySelector(`[data-col='${col}']`).style.background = "green"
qu.splice(0, 1)
console.log('qq', qu)
setTimeout(() => {
document.querySelector(`[data-row='${row}']`).querySelector(`[data-col='${col}']`).style.background = "gray"
}, 100)
}
else {
over(row, col);
}
if (qu.length === 0) {
setTimeout(() => {
increaseScore()
increaseLevel()
}, 2000)
}
console.log('r', row, 'c', col)
}
function startGame() {
resetGame()
createGrid()
setTimeout(() => {
for (let i = 0; i < score + 1; i++) {
qu.push([0, Math.floor(Math.random() * gridSize)])
}
showingSequence = true
console.log('qu', qu)
showSequence(0)
}, 1500)
}
function increaseLevel() {
for (let i = 0; i < score + 1; i++) {
qu.push([0, Math.floor(Math.random() * gridSize)])
}
console.log("qu", qu)
showingSequence = true
showSequence(0)
}
function showSequence(i) {
console.log('showSequence-', i)
if (i < qu.length) {
let r = qu[i][0]
let c = qu[i][1]
selectedBox = document.querySelector(`[data-row='${r}']`).querySelector(`[data-col='${c}']`)
selectedBox.classList.add('highlight')
selectedBox.innerText
setTimeout(() => {
// selectedBox.style.background = "grey"
selectedBox.classList.remove('highlight')
selectedBox.innerText
setTimeout(() => {
showSequence(i + 1)
}, 1000)
}, 2000)
}
else {
showingSequence = false
}
}
createGrid()
body{
width: 80vw;
height: 200px;
margin: auto;
margin-top: 40px;
}
.main{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 80%;
margin: auto;
border: 2px solid black;
margin-top:10px;
}
input{
padding: 5px;
}
.d-flex{
display: flex;
justify-content: space-between;
align-items: center;
}
.row{
display: flex;
align-items: center;
flex-grow: 1;
width: 100%;
height: auto;
}
.box{
width: 100%;
height: 100%;
border: 1px solid white;
background-color: gray;
}
.btn-container{
display: flex;
align-items: center;
margin-top: 20px;
justify-content: center;
}
.highlight{
background-color: blue;
}
.highlight-danger{
background-color: red;
}
.shake{
animation: myShake 0.8s infinite;
transform: translate3d(0,0,0);
}
#keyframes myShake {
0% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90%{
transform: translateX(-8px);
}
20%, 40%, 60%, 80%, 100%{
transform: translateX(8px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
</style>
<body>
<label for="grid">Enter grid Size</label>
<input id="grid" name="grid" type="text" placeholder="Enter grid size" value="5">
<div class="d-flex">
<div id="score">Score: 0</div>
<div id="hscore">High Score: 0</div>
</div>
<main class="main" onclick="handleGridClick(event)">
<div class="row" data-row="0">
<!-- <div class="box" data-col="0"></div>
<div class="box" data-col="1"></div>
<div class="box" data-col="2"></div>
<div class="box" data-col="3"></div>
<div class="box" data-col="4"></div>
<div class="box" data-col="5"></div> -->
</div>
</main>
<div class="btn-container">
<button onclick="startGame()">START</button>
</div>
<script>
</script>
</body>
</html>
I am creating a chessboard with Javascript. I already managed to create the board itself, but I'm having trouble giving every field its fitting class (black or white).
I managed to correctly assign the classes for the first row, but am having trouble with the rest of the board. I know there are probably easier solutions to this.
<!DOCTYPE html>
<html>
<head>
<title>Chess</title>
<link rel="stylesheet" type="text/css" href="assets/css/chess.css">
<script type="text/javascript" src="assets/js/lib/jquery.js"></script>
</head>
<body onload="initGame()">
<h1>Chess</h1>
<div id="board">
</div>
<script type="text/javascript" src="assets/js/chess.js"></script>
</body>
</html>
body{
text-align: center;
background-color: rgb(30, 30, 30);
}
#board{
margin: 0 auto;
width: 800px;
height: 800px;
background-color: white;
}
#board div{
width: 100px;
height: 100px;
float: left;
}
.white{
background-color: white;
border: 1px solid black;
}
.black{
background-color: black;
border: 1px solid white;
}
const board = [];
const boardElement = document.getElementById("board");
function initGame(){
for(var y = 0; y < 8; y++){
var row = [];
for(var x = 0; x < 8; x++){
var cell = {};
cell.element = document.createElement("div")
boardElement.appendChild(cell.element);
row.push(cell);
}
board.push(row);
}
$("#board div").addClass("field white");
for(var i = 0; i < board.length * 8; i++){
if((i % 7) == 0 && i != 0){
$(".field")[i].className = "field black";
i++;
}
else if((i % 7) == 0){
i++;
}
$(".field")[i].className = "field black";
i++;
}
startGame();
}
function startGame(){
}
The current output:
You can cut down your initGame logic to just add white class when y and x are either both odd or both even. You can do this by y%2 == x%2. You won't need the extra for loop.!
function initGame(){
for(var y = 0; y < 8; y++){
var row = [];
for(var x = 0; x < 8; x++){
var cell = {};
cell.element = document.createElement("div")
if(y%2 == x%2)
{
cell.element.className = "field white";
}
else
{
cell.element.className = "field black";
}
boardElement.appendChild(cell.element);
row.push(cell);
}
board.push(row);
}
startGame();
}
Not sure what other functionality you'd need, but for generating the board you could do something like this:
const md = () => document.createElement('div');
function makeBoard (container, length = 8) {
for ( let i = 0; i < length; i++) {
const row = md();
Array.from({length}).forEach(() => row.appendChild(md()));
container.appendChild(row);
}
}
makeBoard(document.getElementById('board'));
#board > div {
display: flex;
min-height: 32px;
}
#board > div > div {
flex: 0 0 32px;
background: tomato;
}
#board > div:nth-child(even) > div:nth-child(even) {
background: bisque;
}
#board > div:nth-child(odd) > div:nth-child(odd) {
background: bisque;
}
<div id="board"></div>
A solution with swapping array:
var colors = ['white', 'black'];
$("#board div").each(function(i) {
if((i % 2) == 0)
$(this).addClass(colors[0]);
else
$(this).addClass(colors[1]);
if([8,16,24,32,40,48,56,64].indexOf((i + 1)) > -1)
colors = colors.reverse();
});
const board = [];
const boardElement = document.getElementById("board");
function initGame(){
for(var y = 0; y < 8; y++){
var row = [];
for(var x = 0; x < 8; x++){
var cell = {};
cell.element = document.createElement("div")
boardElement.appendChild(cell.element);
row.push(cell);
}
board.push(row);
}
$("#board div").addClass('field');
var colors = ['white', 'black'];
$("#board div").each(function(i) {
if((i % 2) == 0)
$(this).addClass(colors[0]);
else
$(this).addClass(colors[1]);
if([8,16,24,32,40,48,56,64].indexOf((i + 1)) > -1)
colors = colors.reverse();
});
// startGame();
}
body{
text-align: center;
background-color: rgb(30, 30, 30);
}
#board{
margin: 0 auto;
width: 400px;
height: 400px;
background-color: white;
}
#board div{
width: 50px;
height: 50px;
float: left;
box-sizing: border-box;
}
.white{
background-color: white;
border: 1px solid black;
}
.black{
background-color: black;
border: 1px solid white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Chess</title>
<link rel="stylesheet" type="text/css" href="assets/css/chess.css">
<script type="text/javascript" src="assets/js/lib/jquery.js"></script>
</head>
<body onload="initGame()">
<h1>Chess</h1>
<div id="board">
</div>
<script type="text/javascript" src="assets/js/chess.js"></script>
</body>
</html>
there are a bug on IE 11 when i empty the html in a DIV and I remove class in the list with JavaScriptS.
The DIV loses the syle CSS "Overflow:auto" and guard is a great height
There is no bug on another navigator.
Sample:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
div {
margin: 5px;
}
ul {
margin: 5px;
max-height: 200px;
overflow: auto;
}
ul li.selected {
font-weight: bold;
}
.dest {
width: 500px;
min-height: 21px;
max-height: 120px;
overflow: auto;
border: 1px solid #ccc;
background-color: #f9f9f0;
padding: 3px;
}
.dest span {
display: block;
background-color: #fff;
float: left;
border-radius: 2px;
border: 1px solid #ccc;
margin: 2px;
padding: 0px 2px 0px 2px;
line-height: 21px;
height: auto;
}
</style>
<script>
window.onload = function(){
document.getElementById("btclear").onclick = function(){
document.getElementById("dest").innerHTML = "";
};
document.getElementById("btclearplus").onclick = function(){
document.getElementById("dest").innerHTML = "";
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
};
document.getElementById("btall").onclick = function(){
for(var i = 0; i < 50; i++) {
var span = document.createElement("span");
span.innerHTML = "first name " + i + " last name " + i;
document.getElementById("dest").appendChild(span);
}
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "selected";
}
};
for(var i = 0; i < 50; i++) {
for(var i = 0; i < 50; i++) {
var li = document.createElement("li");
li.innerHTML = "nom" + i + " prenom" + i;
document.getElementById("list").appendChild(li);
}
}
}
</script>
</head>
<body>
<div id="dest" class="dest"></div>
<div>
<ul id="list"></ul>
</div>
<div>
<button id="btall">Select all</button>
<button id="btclear">Clear all</button>
<button id="btclearplus">Clear all and deselect</button>
</div>
</body>
</html>
Thank you, Jean-Pierre
change the one of the loops variable i to j because you have same variable in both loops
for(var i = 0; i < 50; i++) {
for(var j = 0; j < 50; j++) {
// do you logic
}
}
I deleted the double loop, the problem was not that here.
In Internet Explorer, you must click the "Select All" button and then the button "Clear all and deselect" to reproduce the problem.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
div {
margin: 5px;
}
ul {
margin: 5px;
max-height: 200px;
overflow: auto;
}
ul li.selected {
font-weight: bold;
}
.dest {
width: 500px;
min-height: 21px;
max-height: 120px;
overflow: auto;
border: 1px solid #ccc;
background-color: #f9f9f0;
padding: 3px;
}
.dest span {
display: block;
background-color: #fff;
float: left;
border-radius: 2px;
border: 1px solid #ccc;
margin: 2px;
padding: 0px 2px 0px 2px;
line-height: 21px;
height: auto;
}
</style>
<script>
window.onload = function(){
document.getElementById("btclear").onclick = function(){
document.getElementById("dest").innerHTML = "";
};
document.getElementById("btclearplus").onclick = function(){
document.getElementById("dest").innerHTML = "";
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
};
document.getElementById("btall").onclick = function(){
for(var i = 0; i < 50; i++) {
var span = document.createElement("span");
span.innerHTML = "first name " + i + " last name " + i;
document.getElementById("dest").appendChild(span);
}
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "selected";
}
};
for(var i = 0; i < 50; i++) {
var li = document.createElement("li");
li.innerHTML = "nom" + i + " prenom" + i;
document.getElementById("list").appendChild(li);
}
}
</script>
</head>
<body>
<div id="dest" class="dest"></div>
<div>
<ul id="list"></ul>
</div>
<div>
<button id="btall">Select all</button>
<button id="btclear">Clear all</button>
<button id="btclearplus">Clear all and deselect</button>
</div>
</body>
</html>
Thank you, Jean-Pierre
Overflow: Auto problem / bug in IE
.element { overflow-y: auto; overflow-x: visible; width: 450px; }
DEMO