update html and css before scripts run

Question

i'm new in JS, i have a 3x3 table filled as below:

  <table id="mytable">
    <tr>
      <td id="1" onclick="select_home(1)"></td>
      <td id="2" onclick="select_home(this.id)"></td>
      <td id="3" onclick="select_home(this.id)"></td>
    </tr>
    <tr>
      <td id="4" onclick="select_home(this.id)"></td>
      <td id="5" onclick="select_home(this.id)"></td>
      <td id="6" onclick="select_home(this.id)"></td>
    </tr>+
    <tr>
      <td id="7" onclick="select_home(this.id)"></td>
      <td id="8" onclick="select_home(this.id)"></td>
      <td id="9" onclick="select_home(this.id)"></td>
    </tr>
  </table>

im updating template whenever a click happen on tables as below:

var table = document.querySelector("table");
// listen for a click
table.addEventListener("click", function (ev) {
  // get the event targets ID
  var serviceID = ev.target.id;
  turn() ? blue_checked(serviceID) : red_checked(serviceID);
});

function blue_checked(id) {
  var table = document.getElementById("mytable").getElementsByTagName("td");
  selected_home_blue.push(id);
  table[id - 1].style.backgroundColor = "blue";
  check_game(selected_home_blue, "blue");
}

i am updating background color of td's first then run check_game function but check_game run first and then td background color change, how can i handle it ?

there is an alert() in check game function, i got the alert first and then it changes @KonradLinkowski — Ali
– Ali, Commented Aug 21, 2022 at 11:40
what are you trying to achieve? adding an onclick attribute to a td is already a bad use. Besides of that, it would most likely easier to simply use a single eventListener and an event delegation. — tacoshy
– tacoshy, Commented Aug 21, 2022 at 11:41
One error I notice is that you pass the id as a string, but then you try to subtract one from the id with table[id-1]. If you want to treat the id as a number you could use parseInt(id). By the way, your code snippet misses a lot of code so it's kind of hard for us to reproduce your problem. — Kokodoko
– Kokodoko, Commented Aug 21, 2022 at 11:41

Kokodoko · Accepted Answer · 2022-08-21 12:17:07Z

1

I simplified your cell-coloring code. You can directly get the table cell that needs to be colored using the id. You can show a message with your own div instead of using an alert(). This prevents the problem that the alert() always shows before the DOM is actually changed.

const table = document.querySelector("table");
const messagebox = document.querySelector("message");

// listen for a click
table.addEventListener("click", function (ev) {
  // get the event targets ID
  const serviceID = ev.target.id;
  blue_checked(serviceID); // example for blue
});

function blue_checked(id) {
  const tablecell = document.getElementById(id);
  tablecell.style.backgroundColor = "blue";
  showMessage("blue played")
}

function showMessage(msg) {
  messagebox.innerText = msg
}

And in your HTML add the message box

<div id="message"></div>

edited Aug 21, 2022 at 12:17

answered Aug 21, 2022 at 11:46

Kokodoko

28.3k37 gold badges132 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ali Over a year ago

it's depends on turn() function, once blue and once red. actually im trying to make a tictoctoe game

Kokodoko Over a year ago

I understand, I just color the blue cells here as an example of how you could achieve it, since you didn't include the code for the turn() function.

Ali Over a year ago

still didnt work for me. the alert function in check_game happen first!

Kokodoko Over a year ago

The alert box gets triggered before the DOM changes, like @Konrad Linkowski mentioned. There is no way around this. The more common solution is to create your own modal box or text box with CSS and javascript, and display your user messages in there instead of using alert().

Ali Over a year ago

i learned smt new here! dank je wel ;)

|

Collectives™ on Stack Overflow

update html and css before scripts run

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related