locked
Change font colour depending on value RRS feed

  • Question

  • User1001851595 posted

    Hi,

    I have an ASP.NET, MVC, Angular2 site.  Within my application I have a label that displays a dynamic total.  The total could be a negative number i.e £-1.99 or a positive number £1.99

    I'd like to apply 2 styles depending on the value.

    Example:

    Green font if the value is positive £1.99

    Red font if the value is negative £-1.99

    Not sure the best way to tackle this?  Obviously I need a way to check the value then to display the css for the value, but I'm not sure the best method to accomplish this.

    Any help appreciated.

    Wednesday, June 20, 2018 9:14 AM

All replies

  • User-369506445 posted

    hi

    I create a sample for <g class="gr_ gr_40 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="40" data-gr-id="40">you ,</g><g class="gr_ gr_39 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="39" data-gr-id="39">pleasr</g> try that, you have to write 1.99 in the textbox and then click on <g class="gr_ gr_156 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" id="156" data-gr-id="156">button</g> 

    Demo

    <html>
    <head>    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
        <script>
            $(function () {
                $("#btn").click(function () {
                    var text = $("#txt").val();
                    $("#lbl").html(text);
                    if (text == "1.99") {
                        $("#lbl").css('color', 'green');
                    } else if (text == "-1.99") {
                        $("#lbl").css('color', 'red');
                    }
                })
            })
        </script>
    </head>
    <body>
        £<input type="text" id="txt" placeholder=" write 1.99"/>
        <input type="button" id="btn" value="Click"/>
    
        <br />
    
        <label id="lbl"></label>
    
    </body>
    </html>

    Wednesday, June 20, 2018 10:50 AM
  • User1001851595 posted

    Wow, thats extremely kind of you.  Your example works perfectly.

    However the value will be totally dynamic and therefor I can't hard code 1.99 

    My <h3> tag that shows a total figure is calculated via a chain of events that produces a total figure.  The user is not typing the total amount into a text field.

    <h2>Total: &pound;{{Total.toFixed(2)}}</h2>

    I appreciate your time.

    Wednesday, June 20, 2018 11:03 AM
  • User-369506445 posted

    if you want to get H3 value change below line

     var text = $("#txt").val();

    to

      var text = $("#txt").html();

    and put id txt for your tag for example 

     <h3 id="txt">Total: &pound;{{Total.toFixed(2)}}</h3>

    complete script

     <script>
            $(function () {
                $("#btn").click(function () {
                    var text = $("#txt").html();
                    $("#lbl").html(text);
                    if (text == "1.99") {
                        $("#lbl").css('color', 'green');
                    } else if (text == "-1.99") {
                        $("#lbl").css('color', 'red');
                    }
                })
            })
        </script>
    
    
     <h3 id="txt">Total: &pound;{{Total.toFixed(2)}}</h3>
    
     <input type="button" id="btn" value="Click" />

    Wednesday, June 20, 2018 11:18 AM
  • User1001851595 posted

    Thanks for your comment.

    The issue is, you are hard coding the price 

    if (text == "1.99")

    I don't know what the amount will be, it has to be dynamic not hard coded.  I guess I'm looking for an Angularjs example.

    Thanks

    Thursday, June 21, 2018 10:39 AM
  • User-369506445 posted

    so, we review again

    you said your total is

    <h2>Total: &pound;{{Total.toFixed(2)}}</h2>

    for example, it is 1.99

    now, what do you want compare with this total?

    Thursday, June 21, 2018 11:18 AM