Writing inside a .html using JQuery and an if Statement in Javascript

Question

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");

[How can I debug my JavaScript code?](https://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Andreas, Jan 17 '20 at 14:30
Have you checked what the values of `APP.payload.user_id` and `data.player1` are? Obviously they aren't the same given the logic flow. You need to determine why that is. We can't really help with that given the limited code example — Rory McCrossan, Jan 17 '20 at 14:32
```APP.payload.user_id``` and ```data.player1``` give me the same Id back... This is working perfectly. The problem is the line below which I think doesn't work as I expected. — Aalberts_M.L., Jan 17 '20 at 14:35
```data.field```gives me my **HTML ID's**. I've wrote them inside the ```gameController.putScore('X.X')```. After this I used them inside my **backend php** to create my ```2 dimensional array```. but I am receiving the same strings as in the clinches right behind the```gameController.putScore``` — Aalberts_M.L., Jan 17 '20 at 14:49
For example: I click on ```gameController.putScore('1.0')```, the **ID** of the **td** in my **HTML** is also ```1.0```. The line would look like this then: ```$("#1.0").text("X")``` as far as i can remember, this should work. But it doesn't. — Aalberts_M.L., Jan 17 '20 at 14:56

score 4 · Accepted Answer · answered Jan 17 '20 at 15:09

4

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?

answered Jan 17 '20 at 15:09

Solarflare

97
10

Writing inside a .html using JQuery and an if Statement in Javascript

1 Answers1