Formatting HTML with jQuery inside a javascript function

Question

I'm trying to update numbers on a page based on button pushing by a user. I have it working, but when the number updates, the text is no longer formatted like it came in a <code></code> block. Here's the code I'm using minus any effort to control the format:

<script>
    var countUp = function() {
        $("#num").html(parseInt($("#num").html()) + 1);
        $("#textWithNumInIt").html("The number is now"+$("#num").html() );
    }
</script>

<p id="textWithNumInIt"><code>The number is 0</code></p>

I've tried putting <code></code> tags inside the jQuery, with and without escape characters. I've tried using .val() and .text() to set the text in an effort to leave the formatting alone. I've tried using a span around the number itself, but then the value doesn't even update.

This is the first time I have changed HTML using jQuery inside a javascript function, so the trouble might have something to do with that. Any help would be awesome, and if you have advice on a totally different way to do this, please share.

Wrapping in <code></code> seems to work fine: jsfiddle.net/PPeFS — Explosion Pills
– Explosion Pills, Commented Feb 12, 2013 at 16:46

Blazemonger · Accepted Answer · 2013-02-12 16:44:23Z

2

When you edit the contents of the textWithNumInIt paragraph, the <code> tags inside that paragraph are naturally replaced as well. This should work:

$("#textWithNumInIt").html("<code>The number is now "+$("#num").text()+"</code>" );

answered Feb 12, 2013 at 16:44

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

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

2 Comments

Justin Helps Over a year ago

I had already tried that, and it didn't work. I just tried wrapping <b></b> tags around it instead, and the bold showed up. It is possible that the framework I'm working in prevents certain tags from being used inside the javascript?

Blazemonger Over a year ago

No idea. As EP pointed out, a self-contained example works fine, so you need to provide us with an example where it doesn't work before we can try to figure out why.

svineet · Accepted Answer · 2013-02-12 16:46:14Z

0

Maybe try this -

$('#textWithNumInIt code').html("The number is now "+$("#num").text() )

answered Feb 12, 2013 at 16:46

svineet

1,8991 gold badge18 silver badges31 bronze badges

Comments

Blazemonger · Accepted Answer · 2013-02-12 17:01:37Z

0

When you parseInt it, it gets converted into plain text and the <code> wrapper is gone. Use this and you will be on your path.

var countUp = function() {
    var t = parseInt($("#num").text()) + 1);//using text() to avoid any unintentional html tag issues
    $("#num").html(t);
    $("#textWithNumInIt").html("<code>The number is now "+t+"</code>" );
}

or otherwise you can continue with your code by making a simple edit.

var countUp = function() {
    $("#num").html(parseInt($("#num").html()) + 1);
    $("#textWithNumInIt code").html("The number is now"+$("#num").html() );
}

edited Feb 12, 2013 at 17:01

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

answered Feb 12, 2013 at 16:50

jagzviruz

1,52313 silver badges28 bronze badges

Collectives™ on Stack Overflow

Formatting HTML with jQuery inside a javascript function

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related