I have a HTML with my Tic Tac Toe field. With several onlick
's
HTML (game.html):
<table class="nes-table is-bordered is-centered" id="tttpattern">
<tbody>
<tr>
<td class="square" id="0.0" onclick="gameController.putScore('0.0')"></td>
<td class="square" id="0.1" onclick="gameController.putScore('0.1')"></td>
<td class="square" id="0.2" onclick="gameController.putScore('0.2')"></td>
</tr>
<tr>
<td class="square" id="1.0" onclick="gameController.putScore('1.0')"></td>
<td class="square" id="1.1" onclick="gameController.putScore('1.1')"></td>
<td class="square" id="1.2" onclick="gameController.putScore('1.2')"></td>
</tr>
<tr>
<td class="square" id="2.0" onclick="gameController.putScore('2.0')"></td>
<td class="square" id="2.1" onclick="gameController.putScore('2.1')"></td>
<td class="square" id="2.2" onclick="gameController.putScore('2.2')"></td>
</tr>
</tbody>
</table>
When I click on one of the onclick
's, my code runs the putScore
function inside my gameController.js
.
Inside this js I want to check if the used user_id
inside my payload
is the same as the player1
ID I get from my DB.
If this is the case my programm should write an X in the square I clicked. But it doesn't.
Does anybody got an Idea how I can write the X inside the square?
putScore function (gameController.js)
putScore: function (option) {
gameModel.putScore(APP.route.param.gameID, {"field" : option}).then(function (data) {
if (APP.payload.user_id === data.player1) {
$("#" + data.field).text("X");
} else {
$("#" + data.field).text("O");
}
}).catch(function(e) {APP.logError(e)});
}
Did I made any mistake?
I think the important part is this: $("#" + data.field).text("X");
The conditional loops that can be worked in a jQuery script are 'if' statement, 'if..else' statement, and 'if..else if' statement.
Not in HTML. Consider using JavaScript instead.
Use if to specify a block of code to be executed, if a specified condition is true. Use else to specify a block of code to be executed, if the same condition is false. Use else if to specify a new condition to test, if the first condition is false. Use switch to specify many alternative blocks of code to be executed.
Is there a reason you aren't using option natively rather than complicating it using jquery?
document.getElementById(option).innerHTML = "X";
Would do the trick here?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With