Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

107
Views
Change the H3 text color depends on value from database using Javascript

So, this is the line from the code.

PHP:

<div class="col">
    <h3 class="text-start name" style="font-size: 12px;color: var(--bs-secondary);" id="bizApproval"><?php echo $bizApproval ;?></h3>
</div>

which <?php echo $bizApproval ;?> this will get the value from database which either Pending, Approved, Banned but what I want is if its Pending the text color yellow, if Approved text color green and if Banned text color red.

about 4 years ago · Santiago Trujillo
2 answers
Answer question

0

You can simple create a variable with color and put into class like:

<?php

$color = ($bizApproval === 'Pending') ? 'yellow' : (($bizApproval === 'Approved') ? 'green' : 'red');
?>
<div class="col">
    <h3 class="text-start name" style="font-size: 12px;color: <?php echo color; ?>;" id="bizApproval"><?php echo $bizApproval ;?></h3>
</div>
about 4 years ago · Santiago Trujillo Report

0

You don't need JavaScript for this. You can create in your css file some color classes like this (this is a example):

.pending-color{
    color: yellow;
}
.banned-color{
    color: red;
}
.approved-color{
    color: green;
}

And in your php use this:

NOTE: assuming your <?php echo $bizApproval ;?> have the Pending, Approved, Banned values.

<div class="col">
    <h3 class="text-start name <?php echo $bizApproval.'-color'; ?>" style="font-size: 12px; id="bizApproval"> <?php echo $bizApproval ;?></h3>
</div>
about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!