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, May 07 '15 at 11:05
Try using `$(document).find('#container').html(startPoint);` to replace the html inside #container and set the new value. — xmarston, May 07 '15 at 11:07
Do you mean if you want to increase or decrease result should be display in container right — Yuyutsu, May 07 '15 at 11:11

Josh Stevenson · Answer 1 · 2015-05-07T11:11:03.173

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 07 '15 at 11:11

answered May 07 '15 at 11:05

Josh Stevenson

895
5
17

1

No problem, ironmike. If you are still learning javascript you might want to have a look at this website, it's very good. http://www.codecademy.com – Josh Stevenson May 07 '15 at 11:12

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

Brilliant!! I have to wait 6 minutes to mark your answer as correct but i'll do so! thanks again! — ironmike, May 07 '15 at 11:13

score 1 · Answer 3 · answered May 07 '15 at 11:09

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);
        }

  });

score 1 · Answer 4 · answered May 07 '15 at 11:09

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);
        });
  });

score 1 · Answer 5 · edited May 23 '17 at 12:06

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 :)

JavaScript adding to a variable and displaying result in a div

5 Answers5

`.text(text)`