Make font awesome icon change color when select menu changes.

Question

Newbie here, I am working really hard on understanding JavaScript but I need a little push in the right direction.

I have a fundamental knowledge of HTML and CSS. Could you tell me which language I need to use to complete my goal, do I need Bootstrap, etc etc?

This is just an example of what I am working on. I need the font awesome icon to change to the color of what option the user has chosen from the dropdown menu.

Here is the HTML for my example.

<link rel="stylesheet" type='text/css' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
 <table> 
    <tr>
        <td>
            <select>
            <option value="blue">BLUE</option>
            <option value="red">RED</option>
            <option value="green">GREEN</option>
        </select>
    </td>
    <td>
        <td>
            <i class="fa fa-phone"></i>
        </td>
        </tr>
</table>
<style>
<!--Help here! -->
</style>

Answer 1

UPDATE

I have updated the answer to show how to add the event handler using on() (see comments).

You just need to add a handler to the change event of the select element.

You can do it with change() :

$('#my_select').change( function() {
    $('#icon_phone').css( 'color', $(this).val() );
});

Or with on() :

$('#my_select').on( 'change', function() {
    $('#icon_phone').css( 'color', $(this).val() );
});

When it changes, add a new CSS rule to the font awesome icon.

 $('#my_select').change( function() { $('#icon_phone').css( 'color', $(this).val() ); }); $('#my_select2').on( 'change', function() { $('#icon_phone').css( 'color', $(this).val() ); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <link rel="stylesheet" type='text/css' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <table> <tr> <td> <select id="my_select" > <option value="blue">BLUE</option> <option value="red">RED</option> <option value="green">GREEN</option> </select> <select id="my_select2" > <option value="blue">BLUE</option> <option value="red">RED</option> <option value="green">GREEN</option> </select> </td> <td> <td> <i id="icon_phone" class="fa fa-phone"></i> </td> </tr> </table> <style> <!--Help here! --> </style>

Answer 2

Well it looks like you're definitely on the right path, JavaScript is what you're looking for here to get some interactivity on your page.

I'd recommend starting with jQuery to get started, and you can check out this JSFiddle to see a basic template for a really basic way to get interaction here (changing the contents of a <div> .

I'd recommend getting familiar with how jQuery works, and then try changing the css/class of the icon <i></i> using jQuery. This should start you on the right path.