CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Saurabh Kumar
Saurabh Kumar

Reputation: 16661

how to increment the text inside span element

I have a like link using twitter bootstrap.

 <a href="#"><i class="icon-thumbs-up"></i></a><span class="badge">${fn:length(page.likes)}</span>

  When the user clicks on like link the value within the span should be incremented.

Since i have for every comment a like button i dont know how to perform this task from a single javascript because how i can make sure which span to update.

Also one more thing i have this like button as a hyperlink with href="#". so the page is jumping to the top eveytime i click on the like link. Any idea how i can solve the problem.

Upvotes: 0

Views: 3385

Answers (3)

Rastko
Rastko

Reputation: 468

For your existing dom structure just go for 

$('.icon-thumbs-up').parent('a').click(function() {
     var count = parseInt($('badge').text())+1;
     $('badge').text(count);
}

If you wanna give id or class to a then replace $('.icon-thumbs-up').parent('a') with whatever new selector

Two things to explain here:

first : parseInt makes sure that number is passed for the incrementation, it is recommended way because of possibility of this creating silent error in js, passing wrong value tu text of your counter and breaking your page

second: I use +1 instead of ++ because ++ and -- tend to be instable depending on lots of things, so I use them never or only in for loop.

Upvotes: 2

Ashwin Ramaswami
Ashwin Ramaswami

Reputation: 913

You can use jQuery for that:

Make the <a> tag have a class, for example "likeLink":

<a class="likeLink" href="#"><i class="icon-thumbs-up"></i></a><span class="badge">${fn:length(page.likes)}</span>
<script>
$("a.likeLink").click(function() {
    $(this).next().text($(this).next().text()+1);
});
</script>

$(this).next() gets the next sibling of the element, in this case the <span>.

For your second question, what do you want the like button to do? If you just want it to appear as a link, you can change the "href" attribute of the link:

<a href="javascript:void('0')">

This would just do nothing, but keep the link.

Upvotes: 0

MIIB
MIIB

Reputation: 1849

For your second problem you could use <a href="javascript:void(0)">

For the first problem, where is your like button? You could always assign a unique id for each of you spans, then onclick the like button , you could use : document.getElementById("spanUiqueId").innerHTML = parseInt(document.getElementById("spanUiqueId").innerHTML)+1;

Upvotes: 4

Related Questions