Having difficulty altering the color of certain text using JavaScript

Question

Having difficulty altering the color of certain text using JavaScript

Below is a function that I need help with. It's a simple function that changes the text color to green when the eventStatus shows as Active:

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>

I tried using both 'status.style.color' and 'getElementById', but the text wasn't showing up at all.

Can you pinpoint where I went wrong?

Your assistance is greatly appreciated!

javascript jquery html css frontend

Answer 1

Answer №1

Update:

The code is functioning correctly, but it's important to ensure that you execute the code after the DOM has fully loaded.

(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>

Make sure the document is fully loaded and that the DOM element you are trying to modify is accessible before calling your function. You can view a demonstration of JavaScript modifying text color at this link

Answer 2

Update:

The code is functioning correctly, but it's important to ensure that you execute the code after the DOM has fully loaded.

(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>

Make sure the document is fully loaded and that the DOM element you are trying to modify is accessible before calling your function. You can view a demonstration of JavaScript modifying text color at this link

Answer 3

Answer №2

Here is a JavaScript function that determines the status of an event based on the difference in days:

function checkEventStatus() {
  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';
  }

  return '<div style="background-color:' + statusColor + '">' + status + '</div>';
}

Below is the HTML code snippet that displays the event status using this function:

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

Answer 4

Here is a JavaScript function that determines the status of an event based on the difference in days:

function checkEventStatus() {
  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';
  }

  return '<div style="background-color:' + statusColor + '">' + status + '</div>';
}

Below is the HTML code snippet that displays the event status using this function:

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

Having difficulty altering the color of certain text using JavaScript

Answer №1

Answer №2

Similar questions

Unable to amend or remove fields within a JSON object

Convert Screen Coordinates to World Coordinates with ThreeJS

encountering an unforeseen error during an ajax request

The React function is encountering a situation where the action payload is not

What can be done to address the narrowing of the left div element as the right div's child elements grow in size?

Angular continually monitors changes for dom-to-image and generates countless renders

"Troubleshooting: The ExitApp Function in PhoneGap's navigator.app is not

Exploring innerHTML in JavaScript for event listening

Interactive questioning system using Javascript/jQuery for Quick Responses

Update the :hover effect on elements within a pseudo element

Trigger multiple toggles with a single @click event

Utilizing Jquery to Attach Events to Multiple Instances Across a Webpage

jQuery fails to update the CSS3 animation speed dynamically in IE10

Tailored Bootstrap form styles for different screen sizes

Is it possible to find a match by searching through multiple arrays for a corresponding variable name?

Everything runs smoothly when initiating the API call through npm start, but unexpectedly crashes upon attempting to

Having trouble locating the "forgot account" link below the password input field

Having issues displaying the & symbol in HTML from backend data

Verify the overlay for numerous divs problem

Interactive PayPal quick checkout feature