Problems with CSS changes in JavaScript

Question

I am trying do a CSS change via JavaScript. I have a quiz site where, when the user marks the correct option, the option will become green, and when the user marks the incorrect option, the option will become red, but I have to change the color and redirect the user for another page, but the CSS change is very slow and, at certain times, doesn't work. This is my code:

CSS:

.choice{
  white-space: normal;
  word-wrap: break-word;
  margin: 20px;
  width: calc(40% + 100px);
  height: calc(10% + 10px);
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.4);
  border-radius: 7px;
  background-color: rgba(255,255,255,0.6);
  cursor: pointer;
  font-size: 20px;
  transition: 0.4s;
}

JS:

function sleep(ms) {
    var d = new Date();
    var d2 = null;
    do { d2 = new Date(); }
    while(d2-d < ms);
}

function govariable(page,variable,valor,id,color) {
    document.getElementById(id).style.backgroundColor = color
    sleep(3000)
    window.location.replace(`${page}?${variable}=${valor}`)
}

I suggest removing the sleep function since it blocks the whole page/script from running. You can use setInterval() to wait three seconds before leaving the page. — Kokodoko
– Kokodoko, Commented Nov 15, 2019 at 17:44

Hecksa · Accepted Answer · 2019-11-15 17:45:54Z

1

When you change something in the DOM (in this case, your background color) JavaScript won't update your screen until the event it is processing has finished.

This is because JavaScript runs in only one thread - it can't be looping around and around and re-displaying your background colour at the same time! It needs to finish looping first.

Instead of trying to implement a "sleep" function that will never work well in a single-threaded javascript world, you should try using setTimeout().

function govariable(page,variable,valor,id,color) {
    document.getElementById(id).style.backgroundColor = color
    setTimeout(function() {
        window.location.replace(`${page}?${variable}=${valor}`)
    }, 3000);
}

Instead of looping around again and again until time is up, at a very simplistic level this does something more like setting an internal "wake-up alarm" inside the JavaScript engine, that in 3000 milliseconds will go off, and tell JavaScript to run the code inside it. In this case, to call window.location.redirect.

answered Nov 15, 2019 at 17:45

Hecksa

2,85224 silver badges36 bronze badges

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

1 Comment

Ederson Ferreira Over a year ago

Thanks, now my code is working, i will finish the topic, :)

Collectives™ on Stack Overflow

Problems with CSS changes in JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related