CODEWITHSUNDEEP
javascriptjqueryvariables
ironmike
ironmike

Reputation: 143

JavaScript adding to a variable and displaying result in a div

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.

Upvotes: 2

Views: 160

Answers (5)

Yuyutsu
Yuyutsu

Reputation: 2527

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

Upvotes: 1

Josh Stevenson
Josh Stevenson

Reputation: 905

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

Upvotes: 1

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

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

Upvotes: 1

john Smith
john Smith

Reputation: 17926

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

  });

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128786

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.

Upvotes: 1

Related Questions