CODEWITHSUNDEEP
javascriptjqueryhtmlcss
WillKre
WillKre

Reputation: 6158

jQuery: Add to html string when clicking on button

I'm trying to make a simple calculator. I have a div called result, which I have called in jQuery. Whenever I click on the button (number) I want it's value to add onto the string. After I have a string like "5 + 2 + 3" I want to change it to an expression then return the result.

For now all I want is to add the value of the button to the string.

http://codepen.io/kreitzo/pen/RapEqp

index.html

<div id="calculator">
  <button class="value">1</button>
  <button class="value">2</button>
  <button class="value">3</button>
  <button class="value">4</button>
  <button class="value">5</button>
  <button class="value">6</button>
  <button class="value">7</button>
  <button class="value">8</button>
  <button class="value">9</button>
  <button class="value">0</button>
  <button class="value">+</button>
  <button class="value">-</button>
  <button class="value">÷</button>
  <button class="value">*</button>

  <div id="result"></div>
</div>

script.js

$(document).ready(function(){
  var string = $("#result");
  string = "";
  $(".value").click(function(){
    string += $(this).toString();
  });

});

Upvotes: 0

Views: 1305

Answers (4)

DinoMyte
DinoMyte

Reputation: 8858

The following code would let you add and calculate the expression. There are placeholders that you can use the same logic for other calculation.

var string = "";
$(".value").click(function()
{
   if($(this).text() == "CE")
   {
     string = "";
      $("#result").text(string); 
     return;   
   }

   if(("+,-,/,*,=").indexOf($(this).text()) >= 0 && string == "")
     return false;

   if($(this).text() == "=" && !isNaN(parseInt(string)))
   { 
       var calc = 0;
       var num
       var add = string.indexOf('+');
       var sub = string.indexOf('-');
       var mul = string.indexOf('*');
       var div = string.indexOf('/');

       if(add >= 0)
       {       
         num = string.split('+');    
         $.each(num,function(i)
         {
           calc += parseInt(num[i]);
         });
       }          

       $("#result").text(calc);
   }
   else 
   {
    string += $(this).text();
    $("#result").text(string);  
   }
});

Working example : https://jsfiddle.net/01k9m1qh/1/

Upvotes: 1

Carlton
Carlton

Reputation: 838

Try using the jQuery text() function to retrieve the inner text of the clicked button. At present your code is attempting to append the clicked object to the string instead of the clicked objects inner text.

JS

$(document).ready(function(){

  var string = "";

  $(".value").click(function(){
    string += $(this).text().toString();
  });

});

Here is an updated Codepen that is working: http://codepen.io/anon/pen/WwpPQY

Upvotes: 0

mendez7
mendez7

Reputation: 195

  $(document).ready(function(){
 $(".value").click(function(){
   var string = $("#result").html();
  string += $(this).html();
   $("#result").html(string);
   });

  });

Upvotes: 0

John
John

Reputation: 770

try this 

$(".number, .operator").click(function(){
  $("#result").append($(this).html());
})

Upvotes: 0

Related Questions