¿Por qué el color de la variable span_perc no cambia a rojo aunque sé que acabo de actualizar su contenido de texto a '-28.86%'?
Si registro span_perc.textContent en la consola, dice que es un aunque eso no es cierto porque puede cambiarlo para que sea verde y puedo verlo en el sitio web.
<div class="col-12 xl:col-6"> <div class="card"> <h5>Total Profits</h5> <span id="profits_perc"></span> <span id="profits_money"></span> <Chart type="line" :data="lineData" /> </div> </div> </div> </template> <script> import ProductService from '../service/ProductService'; import axios from 'axios'; window.onload = dostuff; 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}); axios.get('http://localhost:8000/').then(response => {span_money.textContent = response.data[2].profits_cash}); if (span_perc.textContent == '-28.86%') { span_perc.setAttribute("style", "color:red") } else { span_perc.setAttribute("style", "color:green") } }Es porque los valores se cambian de forma asíncrona dentro de una llamada XHR, si incluye su condición if dentro del bloque then , debería funcionar:
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") } });Intente realizar los cambios dentro de la llamada asincrónica.
Por qué la naturaleza del trabajo asíncrono es que mientras esperamos que la promesa se resuelva como algunos datos o un error, el resto del código continuará ejecutándose.
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; }); }