[Vuejs]-Why can't I change a variable's textContent's atribute in an if-statement?

by

2👍

It is because the values are changed in an async way inside an XHR call, if you include your if condition inside the then block, it should work:

axios.get('http://localhost:8000/').then(response => {
span_perc.textContent = response.data[2].profits_perc;
if (span_perc.textContent == '-28.86%') {
        span_perc.setAttribute("style", "color:red")
    } else {
        span_perc.setAttribute("style", "color:green")
    }
});

0👍

Try performing the changes within the asynchronous call.

Why the nature of async work is that while we wait for the promise to resolve as some data or an error the rest of the code will continue to execute.

function dostuff() {
      var span_perc = document.getElementById("profits_perc");
      var span_money = document.getElementById("profits_money");
      axios.get("http://localhost:8000/").then((response) => {
        span_perc.textContent = response.data[2].profits_perc;
        if (span_perc.textContent == "-28.86%") {
            span_perc.setAttribute("style", "color:red");
          } else {
            span_perc.setAttribute("style", "color:green");
          }
      });
      axios.get("http://localhost:8000/").then((response) => {
        span_money.textContent = response.data[2].profits_cash;
      });
      
    }

Leave a comment