CODEWITHSUNDEEP
javascript
Mourad karoudi
Mourad karoudi

Reputation: 89

change div class,id,.. in every click

I trying to run code to change div id,class,... in every click but I don't

know how this my js code : 

<div class="up_vote_bt upvote_hide" title="Delete up vote" onclick="upvoteHide()" id="hideupvote"></div>
<script>
$(document).ready(function() {
$("#upvote").click(function() {
document.getElementById("upvote").setAttribute("class","up_vote_bt upvote_hide");
document.getElementById("upvote").setAttribute("title","delete up vote");
document.getElementById("upvote").setAttribute("onclick","hideupvote()");
document.getElementById("upvote").setAttribute("id","hideupvote");
});
});
</script>
<script>
$(document).ready(function() {
$("#hideupvote").click(function() {
document.getElementById("hideupvote").setAttribute("class","up_vote_bt");
document.getElementById("hideupvote").setAttribute("title","up vote");
document.getElementById("hideupvote").setAttribute("onclick","upvote()");
document.getElementById("hideupvote").setAttribute("id","upvote");

});
});
</script>

Upvotes: 0

Views: 108

Answers (2)

bashleigh
bashleigh

Reputation: 9314

if you're using jQuery why not do this? 

$(document).ready(function(){
    $('#upvote').click(function(){
        //$(this) for just this element
        if($(this).hasClass('upvote_hide')){
            $(this).attr('title','Up vote');
            upvote();
        }else{
            $(this).attr('title','Delete up vote');
            hideupvote();
        }
        $(this).toggleClass('upvote_hide')
    });
});

toggleClass() will either add or remove upvote_hide if it doesn't exist or exists.

attr() will alter the attribute much like setAttribute()

For my example there is no need to alter the eventHandlers or in your case setting the attribute onClick to the function. I'ts all done in the jQuery event hander function. So your functions that you're passing to the onclick attribute are called within the function.

Upvotes: 2

Zolt&#225;n Tam&#225;si
Zolt&#225;n Tam&#225;si

Reputation: 12754

When you attach an event handler via jQuery using the 

$("#upvote").click(function() { ... });

mechanism, jQuery will directly attach the handler to the elements in the query result set. This means that the handler will be there, whatever the ID changes to in the future.

What you can do is to attach a delegated handler to the document like this.

$(document).on("click", "#upvote", function() { ... });
$(document).on("click", "#hideupvote", function() { ... });

See this article for a deeper explanation

Also, setting the onclick attribute is meaningless in this case and you should remove those lines.

However, changin IDs of elements is not a good practice. An ID should mean a unique identifier for a DOM node, which is not expected to change. I would rather toggle classes here.

Upvotes: 0

Related Questions