How do I replace text in a span element using Jquery?

Question

I'm trying to get the #percent amount to change to the text contained in the li that is clicked. Someone help me fix my code please and thanks!

<div id="percentchooser">
<ul>
    <li>25</li>
    <li>30</li>
    <li class="selectedpercentage">35</li>
    <li>40</li>
    <li>45</li>
    <li>50</li>
</ul>
<div id="percentage"><span id="percentamount">35</span><span id="percentsign">%</span>

</div>

$("#percentchooser li").click(function () {

    var percentage = $(this).html();

    $("#percentchooser li").removeClass("selectedpercentage");
    $(this).addClass("selectedpercentage");

    $("#percentageamount").html(percentage);


});

That should work fine. Horrifically inefficiently, but otherwise fine. — Niet the Dark Absol
– Niet the Dark Absol, Commented Jan 29, 2013 at 23:02

Nope · Accepted Answer · 2013-01-29 23:03:16Z

3

You seem to reference the wrong id, the id of the span is percentamount in your HTML example but you are referencing it as percentageamount in the script:

$("#percentchooser li").click(function () {
    var percentage = $(this).html();

    $("#percentchooser li").removeClass("selectedpercentage");
    $(this).addClass("selectedpercentage");

    $("#percentamount").html(percentage);
});

Ones changed it seems to work.

DEMO - Using #percentamount instead

answered Jan 29, 2013 at 23:03

Nope

22.4k8 gold badges50 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jaruesink Over a year ago

Thanks, it always helps having someone else look at it. silly mistake.. I thought I knew what I was doing..

Arshabh Agarwal · Accepted Answer · 2013-01-29 23:05:32Z

0

i dont see any percentage amount id here, so i guess this should work

   $("#percentamount").html(percentage);

answered Jan 29, 2013 at 23:05

Arshabh Agarwal

5562 silver badges15 bronze badges

Comments

Niet the Dark Absol · Accepted Answer · 2013-01-29 23:06:40Z

0

Have you considered not using jQuery? It is unnecessary in this situation:

(function() {
  var chooser = document.getElementById('percentchooser'),
      selected = (function() {
        var li = chooser.children[0].children, len = li.length, i;
        for(i=0;i<l;i++) if(li[i].className == "selectedpercentage") return li[i];
      })(), target = document.getElementById('percentamount');
  chooser.onclick = function(e) {
    e = e || window.event;
    var t = e.srcElement || e.target;
    if( !t.tagName) t = t.parentNode; 
    if( t.tagName.toLowerCase() == "li") {
      selected.className = "";
      t.className = "selectedpercentage";
      target.firstChild.nodeValue = t.firstChild.nodeValue;
    }
  };
})();

answered Jan 29, 2013 at 23:06

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Collectives™ on Stack Overflow

How do I replace text in a span element using Jquery?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related