Programmiererforum

function game() {
this.board = [
" ", "x ", " ",
" ", " ", " ",
" ", " ", " x"
]
this.printBoard = function(buttons) {
for(i = 0; i < buttons.length; i++) {
buttons[i].innerHTML = this.board[i];
}
}
}

window.onload = function() {
let buttons = document.getElementsByClassName("field");
let myGame = new game();
myGame.printBoard(buttons);
}< /code>
.field {
display: inline-block;
border-style: solid;
background-color: white;
height: 100px;
width: 100px;
font-size: 10px;
}

#board {
margin-left: 40%;
margin-top: 20%;
height: 50%;
}< /code>





My Website




 
 
 

 
 
 

 
 
 

Ich wollte Tictactoe auf einem programmieren Webseite mit einfachem JavaScript, HTML und CSS. Ich habe eine Logik erstellt, damit die Platine basierend auf den Einträgen in einem Array aktualisieren kann, aber wenn ich das mache, sind die Schaltflächen nicht mehr in einer Zeile und es sieht wirklich schlecht aus. < /P>
Erwartete Ergebnisse: Der Text wird in die Schaltfläche gefüllt, die Schaltfläche bleibt an der Stelle. />

[code]function game() {
this.board = [
" ", "x ", " ",
" ", " ", " ",
" ", " ", " x"
]
this.printBoard = function(buttons) {
for(i = 0; i < buttons.length; i++) {
buttons[i].innerHTML = this.board[i];
}
}
}

window.onload = function() {
let buttons = document.getElementsByClassName("field");
let myGame = new game();
myGame.printBoard(buttons);
}< /code>
.field {
display: inline-block;
border-style: solid;
background-color: white;
height: 100px;
width: 100px;
font-size: 10px;
}

#board {
margin-left: 40%;
margin-top: 20%;
height: 50%;
}< /code>





My Website


















[/code]