我想根据条件更改文本颜色

Question

I am trying to show the text color change dynamically based on the condition that i am using in the code.Below is the code that i am using.Please help me out from this problem.

<span class="pendtext" style="font-size:15px;">{{($duepay->status == 'issued') ? 'PENDING' : (($duepay->status == 'paid') ? 'SUCCESSFUL' : $duepay->status)}}</span>


<script>

if($duepay->status == 'issued'){
  $(".pendtext").css('color','green');
}
else{
  $(".pendtext").css('color','yellow');
}

</script>

Answer 1

$duepay->status is presumably coming from your PHP code so you need to output it in the JS in the same way you have in the HTML:

if ('{{$duepay->status}}' === 'issued'){
  $(".pendtext").css('color', 'green');
}
else{
  $(".pendtext").css('color', 'yellow');
}

Note that this can be shortened using a ternary expression:

$(".pendtext").css('color', '{{$duepay->status}}' === 'issued' ? 'green' : 'yellow');

Or to keep the logic entirely in the PHP:

$(".pendtext").css('color', '{{$duepay->status == 'issued' ? 'green' : 'yellow'}});

Answer 2

Maybe this :

    <div id="pend" class="pendtext" style="font-size:15px;">

    </div>

    <script>

    if ('{{$duepay->status}}' === 'issued'){
    document.getElementById('pend').innerHTML = "<p>PENDING</p>";
    document.getElementById('pend').style='color:green';
    }
    else{
    document.getElementById('pend').innerHTML = "<p>SUCCESSFUL</p>";
    document.getElementById('pend').style='color:yellow';
    }

    </script>

Answer 3

Why use a JS if you work with PHP? you can do with PHP too like

<span class="pendtext" style="font-size:15px;color:{{($duepay->status == 'issued')?'green':'yellow'}}">{{($duepay->status == 'issued') ? 'PENDING' : (($duepay->status == 'paid') ? 'SUCCESSFUL' : $duepay->status)}}</span>