Question

I’ve attached an onlick event to a function. I want to reference the element being clicked from inside the function so I can change its inner HTML, but why is it not working? Is there any other way to reference the clicked element?

HTML

        <div class="save_button" onclick="toggle_save_star(<?php echo $listing->listing_id ?>,'<?php echo base_url()?>')">
            <?php if($listing->saved_element_id):?>
            <img src="<?php echo site_url('images/core/icons/basic2/star1_16.png')?>" />
            <?php else:?>
            <img src="<?php echo site_url('images/core/icons/basic2/star1_16_gray.png')?>" />
            <?php endif; ?>
        </div>

Javascript Function

function toggle_save_star(element_id, site_url) {
    var url = site_url+"AJAX/ajax_default/modify_saved";
    var button = $(this);
    $.post(url,{action: 'toggle', element_id: element_id, type: 'listing' }, function(data) {
        if(data == 'saved') {
            $(button).html('<img src="'+site_url+'images/core/icons/basic2/star1_16.png" />');
        }
        else{
            $(button).html('<img src="'+site_url+'images/core/icons/basic2/star1_16_gray.png" />');
        }
    });
}

Answer 1

Try $("#"+element_id) instead. $(this) isn’t working because you’re not running this function as a method on an object.

Improving on the other answers, try this:

$(".save_button").click(function(){
toggle_save_star(element_id, site_url, $(this));
});

and in your function, the third new argument (called “target“, let’s say) could be used like this:

var button = target;

then use button like button.html(...);