CODEWITHSUNDEEP
javascriptjqueryhtml
tsdexter
tsdexter

Reputation: 2991

Why is jQuery .text replacing the entire span?

I have the following HTML

<p><input id="revenue" type="text" value="100000" /><span id="howmuch"><a href="" class="ka_button small_button small_cherry" target="_self" style="opacity: 1; "><span>How Much?</span></a></span></p>
<p id="howmuchpercent">You save <span id="savingspercent">$<span id="howmuchspan">23000.00</span>*</span></p>

And the following Javascript

jQuery(document).ready(function(){
    jQuery('span#howmuch a').click(function(e){
        e.preventDefault();
        var revenue = jQuery('input#revenue').val();
        var savingsonrevenue = revenue * 0.23;
        jQuery('span#howmuchspan').text(savingsonrevenue.toFixed(2));
    });
});

When I click the How Much? button for some reason instead of replacing the contents of the span#howmuchspan it is replacing the entire span resulting in the following HTML

<span id="savingspercent">57500.00</span>

instead of 

<span id="savingspercent">$<span id="howmuchspan">57000.00</span>*</span>

Upvotes: 0

Views: 127

Answers (3)

James Johnson
James Johnson

Reputation: 46047

You probably have code somewhere else that's removing the contents of savingspercent. I created a jsFiddle using the code you posted, and it works as expected:

http://jsfiddle.net/sYA7j/

EDIT:

You have some similar code at the bottom of the page (lines 451-458). Remove it and you should be all set: 

jQuery(document).ready(function(){
    jQuery('span#howmuch a').click(function(e){
    e.preventDefault();
    var revenue = jQuery('input#revenue').val();
    var savingsonrevenue = revenue * 0.23;
    jQuery('p#howmuchpercent span').text(savingsonrevenue.toFixed(2));
    });
});

Created a jsFiddle to test it, and that is your problem. See here: http://jsfiddle.net/JDqBS/

Upvotes: 1

oddtwelve
oddtwelve

Reputation: 1036

Are you sure the HTML markup in your project is like in example you specified? Might be unclosed tag or somthing.

Upvotes: 0

Mike &#39;Pomax&#39; Kamermans
Mike &#39;Pomax&#39; Kamermans

Reputation: 53598

I tried your code on JSFiddle, and it works just fine: http://jsfiddle.net/2FQ4X

Upvotes: 7

Related Questions