jQuery - Compare value and color text

Question

I have made two dropdown lists. When a value is selected in the first, sub-values can be selected in the second. Then it display a table with parameters and specific values.

I want to change a text color when parameter's value is greater than an other specified value (here 100 for example). I tried with a .change and parseInt (with radix) but something wrong. Anyone know how to do it ?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- First list -->
<div class="form-group">
    <label for="first">First list</label>
        <select id="first" class="form-control" role="listbox" onchange="filterList();">
            <option value="Select level 1" selected="selected">Select...</option>
            <option value="Option 1">Option 1</option>
            <option value="Option 2">Option 2</option>
        </select>
</div>
<!-- Second list -->
<div class="form-group">
    <label for="second">Second list</label>
        <select id="second" class="form-control" role="listbox" onchange="parametres();">
            <option value="Select level 2" data-group="Select" selected="selected">Select...</option>
            <option value="Option 1 - 1" data-group="Option 1">First list 1 - Element 1</option>
            <option value="Option 1 - 2" data-group="Option 1">First list 1 - Element 2</option>
            <option value="Option 2 - 1" data-group="Option 2">First list 2 - Element 1</option>
            <option value="Option 2 - 2" data-group="Option 2">First list 2 - Element 2</option>
        </select>
</div>
<br>
<!-- Parameter 1 -->
<div class="container" id="table_param" style="visibility: hidden;">
    <table class="table table-striped">
        <thead>
      <tr>
                <th>Parametre</th>
  <th>Value</th>
  <th>Measurement unit</th>
  </tr>
        </thead>
 <tbody>
     <tr>
        <td>Param1</td>
   <td>     
             <div id="param1" style="visibility: hidden;">      
                 <value data-param="First list 1 - Element 1">130</value>
                 <value data-param="First list 1 - Element 2">91</value>
                 <value data-param="First list 2 - Element 1">114</value>
                 <value data-param="First list 2 - Element 2">63</value>
             </div>
        </td>
    <td><i><h6>g/100mg</h6></i></td>
          </tr>
        </tbody>
    </table>
</div>
<!-- Containers -->
<span id="option-container" style="visibility: hidden; position:absolute;"></span>
<span id="option-container_param1" style="visibility: hidden; position:absolute;"></span>
<script>
// Filter list
function filterList(){
    var first = $("#first").find('option:selected').text(); // stores first list selected elements
    $("#option-container").children().appendTo("#second"); // moves <option> contained in #option-container back to their <select>
    var toMove = $("#second").children("[data-group!='"+first+"']"); // selects elements to move out
    toMove.appendTo("#option-container"); // moves elements in #option-container
    $("#second").removeAttr("disabled"); // enables select
};
// Parameter 1
function parametres(){
    var second = $("#second").find('option:selected').text();
    $("#option-container_param1").children().appendTo("#param1");
    var toMove_param1 = $("#param1").children("[data-param!='"+second+"']");
    toMove_param1.appendTo("#option-container_param1");
    $("#param1").removeAttr("disabled");

  // Color text according to the value
  $("#param1").change(function(){
     if(parseFloat($("#param01").val(),10) > 100){
        return $("#param01").css('color', 'red');
        } 
 })       

  document.getElementById("table_param").style.visibility="visible";          
    document.getElementById("param1").style.visibility="visible";
};
</script>

What exactly is `` tag? What are you trying to do? How do you *change* the value? — Dekel, Jul 31 '16 at 11:47
This values are displayed in a table, depending to the `div` `id` and the `data-group`. Before I made dropdown lists to select elements, each element have parameters with values. It looks like [this](http://cocktaildata.fr/GIS/PY/ex/) — GeoGyro, Jul 31 '16 at 16:32
The problem is that `` is not an html tag, so i'm not so sure what you are trying to do. Perhaps you want to use the ` — Dekel, Jul 31 '16 at 16:33
Do you know html? If not I think you should start by learning html before you jump to javascript/jquery. — Dekel, Jul 31 '16 at 16:41
You should create a [working code](http://stackoverflow.com/help/mcve) that can explain the exact problem. You can use jsfiddle.net for that, or the [snippet option](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) here in stackoverflow. — Dekel, Jul 31 '16 at 17:00
What is `param_sodium`? You don't have an element with that id? — trincot, Jul 31 '16 at 18:24
I think you can use this on your value elements - http://stackoverflow.com/questions/1225102/jquery-event-to-trigger-action-when-a-div-is-made-visible — Ziv Weissman, Jul 31 '16 at 18:33
@GeoGyro, you should *not* put the solution back into your question. Because then neither the question nor answer makes sense any more. — trincot, Jul 31 '16 at 19:58

score 1 · Accepted Answer · answered Jul 31 '16 at 18:42

There are several issues with the following piece of code:

$("#param1").change(function(){
    if(parseFloat($("#param_sodium").val(),10) > 100){
        return $("#param_sodium").css('color', 'red');
    } 
})

This creates an event handler for the change event of a div element. But:

div elements don't natively trigger this event
Even if they did, you don't want to respond to a future event; you want to set the color right when you are executing this code.

You'll want instead to iterate over the value tags inside that div.

Then there is an issue with param_sodium: there is no element with that id. It seems instead you need to address the value element.

The content of this value element is not available via val(), but via text().

Finally, you set the color to red, but depending on your full code, you might need to reset the color to black as well.

So here is the code that you could use instead:

$("#param1").children().each(function () { 
    $(this).css( 'color', +$(this).text() > 100 ? 'red' : 'black');
})

Note that:

the unitary + can be use to coerce the text into a number;
this is the current value element (child of param1);
the ternary operator is used to determine which color to set.

That's it, thanks for the lesson. Sorry for the non-existent `id`, it was pieces of my original code that I forget to change in the example. — GeoGyro, Jul 31 '16 at 19:54

jQuery - Compare value and color text

1 Answers1