Contexto: estoy tratando de cambiar el color de un texto de acuerdo con una declaración if (verde si el retorno de la returnOfInvestment >= 0 rojo si esto no es cierto), sin embargo, parece que no funciona. Ya busqué en SO, pero no puedo entender por qué no funciona como se esperaba.
var returnOfInvestment = (netProfit / initialInvestment.value) * 100; var valEl = document.querySelector(".number dashtext-2"); var portfolioEl = document.querySelector(".number dashtext-3"); if (returnOfInvestment >= 0) { valEl.style.color = "green"; portfolioEl.style.color = "green"; } else { valEl.style.color = "red"; portfolioEl.style.color = "red"; } .dashtext-2 { color: #27b83f !important; } .dashtext-3 { color: #27b83f !important; } <div class="col-md"> <div class="statistic-block block"> <div class="progress-details d-flex align-items-end justify-content-between"> <div class="title"> <div class="icon"><i class="icon-bars"></i></div> <strong><div class="valdeval"></div></strong> </div> <div class="number dashtext-2"> <div class="valorization"></div> </div> </div> </div> </div> <div class="col-md"> <div class="statistic-block block"> <div class="progress-details d-flex align-items-end justify-content-between"> <div class="title"> <div class="icon"><i class="icon-pie-chart"></i></div><strong> Portfolio</strong> </div> <div class="number dashtext-3"> <div class="totalportfolio"></div> </div> </div> </div> </div>.color-red { color: red; }classList.remove('.color-red'); para eliminar la clase que cambia el color del texto a rojo o la misma función con .add en lugar de .remove para aplicar la clase para el color de texto rojo. function changeStyle() { var returnOfInvestment = document.getElementById('input-number').value; var valEl = document.querySelector('.random-element'), portfolioEl = document.querySelector('.portfolio-element'); if (returnOfInvestment >= 0) { valEl.classList.remove('color-red'); portfolioEl.classList.remove('color-red'); } else { valEl.classList.add('color-red'); portfolioEl.classList.add('color-red'); } } .random-element, .portfolio-element { color: green; } .color-red { color: red; } <input type="number" id="input-number" name="input-number" onchange="changeStyle()"> <h1 class="random-element">Random element</h1> <h1 class="portfolio-element">Portfolio element</h1>Alternativamente, puede agregar una clase específica a todos los elementos para los que desea cambiar el color. Entonces puedes usar esto en su lugar:
var allEL = document.querySelectorAll('.class-name'); if (returnOfInvestment >= 0) { allEL.forEach(el => el.classList.remove('color-red')); } else { allEL.forEach(el => el.classList.add('color-red')); } }Eso aplicará/eliminará la clase de todos los elementos con una clase específica. Realmente útil si necesita aplicar cambios a varios elementos.