javascript set element background color

Question

i have a little javascript function that does something when one clicks on the element having onclick that function.

my problem is: i want that, into this function, to set a font color fot the html element having this function onclick. but i don't suceed. my code:

<script type="text/javascript">
    function selecteazaElement(id,stock){
        document.addtobasket.idOfSelectedItem.value=id;
        var number23=document.addtobasket.number;
        number23.options.length=0;
        if (stock>=6) stock=6;

        for (i=1;i<=stock;i++){
            //alert ('id: '+id+'; stock: '+stock);
            number23.options[number23.options.length]=new Option(i, i);
        }
    }
</script>

and how i use it:

<li id = "product_types">
    <a href="#" onclick='selecteazaElement(<?= $type->id; ?>,<?= $type->stock_2; ?>);'><?= $type->label; ?></a>
</li>

any suggestions? thanks!

i have added another function (jquery one) that does partially what i need. the new problem is: i want that background color to be set only on the last clicked item, not on all items that i click. code above:

$(document).ready(function() {
    $('.product_types > li').click(function() {
    $(this)
        .css('background-color','#EE178C')
        .siblings()
        .css('background-color','#ffffff');
    });
});

any ideas why?

thanks!

Answer 1

I would suggest

$(document).ready(function() {
    $('.product_types > li').click(function() {
      $('.product_types > li').css('background-color','#FFFFFF');
      $(this).css('background-color','#EE178C');
    });
});

Answer 2

Your element could have this code:

<li id = "product_types" onclick="selecteazaElement(this);" <...> </li>

To change the foreground color of that element:

function selecteazaElement(element)
{
    element.style.foregroundColor="#SOMECOLOR";
}

If you want to change the background color on only the last element clicked, each element must have a different id. I'd suggest naming each one something like product_types1, product_types2, ..., product_typesN, and so on. Then have a reset function:

function Reset()
{
    for (var i = 1; i <= N; i = i + 1)
    {
        document.getElementById('product_types'+i).style.backgroundColor="#RESETCOLOR";
    }
}

When you call your selecteazaElement(this) function, first call the Reset function, then set the new element:

function selecteazaElement(element)
{
    Reset();
    element.style.backgroundColor="#SOMECOLOR";
}

This way all of the elements that start with product_types followed by a number will be reset to one particular color, and only the element clicked on will have the background changed.