write over html number using jquery

Question

I have a line of html

Guess #0!

I need to write a function that will increment the number within the  tags by 1 each time the #guessButton is clicked. A simple .replaceWith() method wont work because that doesn't count. I'm assuming I need a for loop.

So far I've got this:

$("#guessButton").click(function() { addOne(); });

addOne() being the name of the function I will use to increment.

What javascript method can I use in the addOne() function to reference a number in the html and make it responsive?

j08691 · Accepted Answer · 2016-05-11 17:28:41Z

1

Create a variable count and initialize it to zero. Then on every click, increment it and update the span by using the .html() or .text() method.

var count = 0;
$("#guessButton").click(function() {
    count++;
    $('#count').html(count);
});

Be sure to add your jquery to the end of the page or wrap it in a document ready handler.

answered May 11, 2016 at 17:28

j08691

208k33 gold badges269 silver badges281 bronze badges

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

2 Comments

Colin Aulds Over a year ago

You mean the <script> tag with the link to the minified jquery file?

j08691 Over a year ago

No, load jQuery at the head of your page. Load the code in my answer at the end of the page or wrapped in a document ready after jQuery.

Adam Buchanan Smith · Accepted Answer · 2016-05-11 17:35:53Z

0

another option would be to do it like this: https://jsfiddle.net/c259LrpL/39/

<button id="guessButton" type="button">guessButton</button>
<p>Guess #<span id="count">0</span>!</p>


<script>
$('#guessButton').click(function() {
    $('#count').html(function(i, val) { return val*1+1 });
});
</script>

edited May 11, 2016 at 17:35

answered May 11, 2016 at 17:30

Adam Buchanan Smith

9,4675 gold badges21 silver badges39 bronze badges

1 Comment

Colin Aulds Over a year ago

Why add the parameter of "i" into the function? I don't see where you use it in the code block.

programndial · Accepted Answer · 2016-05-11 17:41:16Z

0

my simpleton answer for your review is here

<p>Guess #<span id="count">0</span>!</p>
<input type="button" id="guessButton" value="Guess" />

$("#guessButton").click(function() {
    var curCount = parseInt($("#count").text(), 10);
    $("#count").text(curCount + 1);
});

answered May 11, 2016 at 17:41

programndial

1699 bronze badges

2 Comments

Colin Aulds Over a year ago

Hey thanks...im looking up the parseInt() method and it appears to take a string and turn it into an integer, is that right? Can you explain to me in more detail what is going on in your code? Why the ", 10"?

programndial Over a year ago

parseInt takes a string, and then the integer base that you want your int to be in. so the "10" in the line of code simply tells parseInt that you want a base-10 integer. @ColinAulds

Dakota Kronberger · Accepted Answer · 2016-05-11 22:07:15Z

0

function addOne() {
    $('#count').html(
        Number( $('#count').html() ) + 1
    );
}

answered May 11, 2016 at 22:07

Dakota Kronberger

1192 bronze badges

Collectives™ on Stack Overflow

write over html number using jquery

4 Answers 4

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related