Невозможно изменить определенный цвет текста в javascript

Вот мой код. Это простая функция, и то, что мне нужно изменить цвет текста, когда он показывает Active eventStatus:Невозможно изменить определенный цвет текста в javascript

function() { 
    var diff, status; 
    diff = moment().diff(date, 'days') 
    if (diff > 0) { 
     status = 'Ended'; 
    } 
    if (diff < 0) { 
     status = 'Pending'; 
    } 
    if (diff === 0) { 

     status = 'Active'; 


     //status.style.color = "#132111" 

     // document.getElementById('greenActive').style.color = "green" 
    } 
    return status; 
    }

UPDATE HTML:

<td id = "status-column" > 
     <span id="greenActive" >{{eventStatus}}</span> 
    </td>

Я пытался использовать как «status.style.color 'и' getElementById '. В результате данные/текст не будут отображаться вообще.

Все, что я сделал не так?

Заранее благодарю вас за помощь!

источник

2016-12-21 WoShiNiBaBa

** документ **. GetElementById ('greenActive'). Style.color = "зеленый" ; - Если это не сработает, вам нужно показать соответствующий HTML и где/как вызывается ваш код. –

@AlexK. Это не сработало. См. Обновленный html-код. – WoShiNiBaBa

Наверняка, когда вы пытаетесь изменить цвет, элемент все еще не существует на дереве DOM. Таким образом, вам нужно отложить объект для применения цвета при завершении запроса асинхронного сервера. –

Edit:

Ваш код работает, но как я уже говорил, вы должны убедиться, что для выполнения кода после того, как DOM загружен

(function() { 
 
    var diff, status; 
 
    diff = 0 
 
    if (diff > 0) { 
 
     status = 'Ended'; 
 
    } 
 
    if (diff < 0) { 
 
     status = 'Pending'; 
 
    } 
 
    if (diff === 0) { 
 

 
     status = 'Active'; 
 

 
     document.getElementById('greenActive').style.color = "green" 
 
    } 
 
    return status; 
 
    })();

<td id = "status-column" > 
 
     <span id="greenActive" >{{eventStatus}}</span> 
 
    </td>

Вы должны убедиться, этот документ загружен и элемент DOM, который вы пытаетесь изменить, доступен перед вызовом функции. Вы можете посмотреть демо Дж.С. модифицирующих цвет текста рабочего here

источник

2016-12-21 17:11:07 Tareq

Да, вы правы. Благодаря! – WoShiNiBaBa

function() { 
var diff, status , statusColor = '';; 
diff = moment().diff(date, 'days') 
if (diff > 0) { 
    status = 'Ended'; 
} 
if (diff < 0) { 
    status = 'Pending'; 
} 
if (diff === 0) { 

    status = 'Active'; 
    statusColor = '#5CB85C'; 


    //status.style.color = "#132111" 

    // document.getElementById('greenActive').style.color = "green" 
} 
return <div style="background-color:'+statusColor+'">'+status+'</div>;

}

<td id = "status-column" > 
    <span id="greenActive" >{{eventStatus}}</span>

источник

2017-01-20 12:44:47 sneha

Невозможно изменить определенный цвет текста в javascript

ответ

Смежные вопросы