JavaScript adding to a variable and displaying result in a div

Question

I'm just learning the basics of javaScript and jquery and have tried to put together this simple program http://codepen.io/mike-grifin/pen/oXjVYW. It's simply a box that displays a number and there is two buttons, one adds 10 and the other button subtracts 10. Ive set the output to alert and it seems to be working fine but if I remove the alert (below) it's not inputting the results into the container div.

$(document).ready(function(){
var startPoint = +90;
  $(document).find('#container').append(startPoint);

    if($('.increase').click(function(){
      startPoint += +10;

    }));

I've also tried to append the startPoint var again but it doesn't overwrite the original:

$(document).ready(function(){
var startPoint = +90;

$(document).find('#container').append(startPoint);

    if($('.increase').click(function(){
      startPoint += +10;

      $(document).find('#container').append(startPoint);

    }));

All the code is at the codepen link. I'm just learning so sorry if it's really obvious or easy. Any educational input or advice would be greatly appreciated. Thanks.

change ".append" to ".html" -> $(document).find('#container').html(startPoint); — OddDev
– OddDev, Commented May 7, 2015 at 11:05
Try using $(document).find('#container').html(startPoint); to replace the html inside #container and set the new value. — xmarston
– xmarston, Commented May 7, 2015 at 11:07
Do you mean if you want to increase or decrease result should be display in container right — Yuyutsu
– Yuyutsu, Commented May 7, 2015 at 11:11

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

That's because you're appending the value to the #container element. If you want to directly alter the text, you can use jQuery's text() method:

$(document).find('#container').text(startPoint);

CodePen Demo

This will overwrite the current text with the new text you're passing in.

.text(text)

Set the content of each element in the set of matched elements to the specified text.

– jQuery's text() documentation

It's worth also noting that your if (startPoint >= 100) check will only be executed when your CodePen demo first loads. If you want to use this check, you'd need to place the if statement within your click event handlers.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 7, 2015 at 11:06

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

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

1 Comment

ironmike Over a year ago

Brilliant!! I have to wait 6 minutes to mark your answer as correct but i'll do so! thanks again!

john Smith · Accepted Answer · 2015-05-07 11:09:12Z

1

You need to remove the contents before appending

i used empty()

$(document).ready(function(){
    var startPoint = 90;
      $('#container').empty().append(startPoint);

        if($('.increase').click(function(){
          startPoint += 10;
          $('#container').empty().append(startPoint);
        }));

        if($('.decrease').click(function(){
          startPoint -= 10;
          $('#container').empty().append(startPoint);
        }));

        if(startPoint >= +100){
           $('#container').empty().append(startPoint);
        }

  });

answered May 7, 2015 at 11:09

john Smith

18k12 gold badges80 silver badges124 bronze badges

Comments

Mohamed-Yousef · Accepted Answer · 2015-05-07 11:09:39Z

1

first of all .. for div you can use .text() or .html() 2nd .. move your if statement into .increase click event

$(document).ready(function(){
      var startPoint = +90;
       $(document).find('#container').append(startPoint);
        $('.increase').on('click',function(){
           if(startPoint >= +100){
              alert('dayum!!');
           }else{
              $('#container').text(startPoint += +10);
           }
        });
        $('.decrease').on('click',function(){
          $('#container').text(startPoint -= +10);
        });
  });

answered May 7, 2015 at 11:09

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

Comments

Josh Stevenson · Accepted Answer · 2015-05-07 11:11:03Z

1

You need to either set the .text() of the #container to the new value, or .empty() the old data out of it before you .append() any more.

$('.increase').click(function(){
  $('#container').text(startPoint += +10);
});

Also, you don't need to wrap the $('.increase').click() in an if It will fire when it is clicked, you don't need to say "if (this is clicked)"

It is implied by the .click() function

edited May 7, 2015 at 11:11

answered May 7, 2015 at 11:05

Josh Stevenson

9055 silver badges18 bronze badges

1 Comment

Josh Stevenson Over a year ago

No problem, ironmike. If you are still learning javascript you might want to have a look at this website, it's very good. codecademy.com

Community · Accepted Answer · 2017-05-23 12:06:36Z

1

Read this : http://www.w3schools.com/jquery/html_html.asp And .html() and .append() without jQuery

$(document).ready(function(){
    var startPoint = +90;
      $(document).find('#container').append(startPoint);

        if($('.increase').click(function(){
          alert(startPoint += +10);
          $("#container").html(startPoint) //added
        }));

        if($('.decrease').click(function(){
          alert(startPoint -= +10);
          $("#container").html(startPoint) //added
        }));

        if(startPoint >= +100){
          alert('dayum!!');
        }

  });

use this code, this helps you :)

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered May 7, 2015 at 11:13

Yuyutsu

2,52724 silver badges38 bronze badges

Collectives™ on Stack Overflow

JavaScript adding to a variable and displaying result in a div

5 Answers 5

`.text(text)`

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

.text(text)

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

`.text(text)`