input-group-addon change color with onclick

Question

I am trying to change the input-group-addon background-color with an onclick javascript function. It seems i can not get this working.

Anyone has an idea?

color = the name of the color (for example 'red').

<script type="text/javascript">
    function changeColor(color, id) {
        document.getElementById('onColor').innerHTML = color;
    }
</script>

Below background-color is set to red. How can I get the text echo'ed from the function changeColor instead of the text red? So I can put any color into it I want, and the color changes on the clicked radio button.

 <div class="input-group" style="width:100%">
                        <span class="input-group-addon" style="background-color:red"></span>
                        <input id="bet" type="number" class="form-control" name="bet" placeholder="Lira">
                    </div>

EDIT: Seems style change with javascript is the answer (not innerHTML). See: Change CSS properties on click

Answer 1

Use document.getElementById(id).style to change element's css , not innerHTML .

 <div class="input-group" style="width:100%"> <span id="input-addon" class="input-group-addon"> Span </span> <input id="bet" type="number" class="form-control" name="bet" placeholder="Lira"> </div> <button onclick="changeColor('red', 'input-addon')">Change Color</button> <script type="text/javascript"> function changeColor(color, id) { document.getElementById(id).style.color = color; } </script>