CODEWITHSUNDEEP
javascriptjquerycolorsonclick
dana
dana

Reputation: 5228

javascript set element background color

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!

Upvotes: 12

Views: 23487

Answers (6)

lightningmanic
lightningmanic

Reputation: 2165

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.

Upvotes: 2

Robert Hurst
Robert Hurst

Reputation: 9102

try this instead:

//ON PAGE LOAD
$(document).ready(function() {

    //SELECT ALL OF THE LIST ITEMS
    $('.product_types > li').each(function () {

        //FOR EACH OF THE LIST ITEMS BIND A CLICK EVENT
        $(this).click(function() {

            //GRAB THE CURRENT LIST ITEM, CHANGE IT BG, RESET THE REST
            $(this)
            .css('background-color','#EE178C')
            .siblings()
            .css('background-color','transparent');
        });
    });
});

If I am correct, the problem is that the click event is being binded to all of the list items (li). when one list item is clicked the event is fired on all of the list items.

I added a simple .each() to your code. It will loop through each of the list items and bind a event to each separately.

Cheers,

-Robert Hurst

Upvotes: 0

standup75
standup75

Reputation: 4814

I would suggest

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

Upvotes: 9

jszpila
jszpila

Reputation: 706

Attach a jQuery click event to '#product_types a' that removes a class from the parent of all elements that match that selector; then, add the class that contains the styles you want back to the parent of the element that was just clicked. It's a little heavy handed and can be made more efficient but it works.

I've made an example in jsFiddle: http://jsfiddle.net/jszpila/f6FDF/

Upvotes: 0

Neo
Neo

Reputation: 11577

$(function() {
    /*if product_types  is a class of element ul the code below 
    will work otherwise  use $('li.product_types') if it's a 
    class of li elements */
    $('.product_types li').click(function() {
        //remove this class that causes background change from any other sibling 
        $('.altBackground').removeClass('altBackground');
        //add this class to the clicked element to change background, color etc...
        $(this).addClass('altBackground');
    });
});

Have your css something like this: 

<style type='text/css'>
.altBackground {
        background-color:#EE178C;
     /* color: your color ; 
        foo: bar */
}
</style>

Upvotes: 0

danjah
danjah

Reputation: 3059

The 'scope' of the function when invoked is the element clicked, so you should be able to just do:

function selecteazaElement(id,stock){

 document.addtobasket.idOfSelectedItem.value=id;
 var number23 = document.addtobasket.number;
 number23.options.length=0;
 if (stock>=6){
   stock=6;
 }
 for (var i=1;i<=stock;i++){
   //alert ('id: '+id+'; stock: '+stock);
   number23.options[number23.options.length]=new Option(i, i);
 }

 // Alter 'this', which is the clicked element in this case
 this.style.backgroundColor = '#000';
}

Upvotes: 0

Related Questions