Change the H3 text color depends on value from database using Javascript-CodePudding

So, this is the line from the code.

PHP:

<div >
    <h3  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.

CodePudding user response：

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

<?php

$color = ($bizApproval === 'Pending') ? 'yellow' : (($bizApproval === 'Approved') ? 'green' : 'red');
?>
<div >
    <h3  style="font-size: 12px;color: <?php echo color; ?>;" id="bizApproval"><?php echo $bizApproval ;?></h3>
</div>

CodePudding user response：

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 >
    <h3  style="font-size: 12px; id="bizApproval"> <?php echo $bizApproval ;?></h3>
</div>