jQuery: Add to html string when clicking on button

Question

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

});

DinoMyte · Accepted Answer · 2016-03-22 00:05:41Z

1

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/

answered Mar 22, 2016 at 0:05

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

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

3 Comments

WillKre Over a year ago

Great, do you know why the chaining isn't working when using more than one unique operator symbol? For example: 2+2+2 = 6, but 2*2+2 =4

DinoMyte Over a year ago

Because i didn't implement the multiplication logic. The solution is only for addition, not for the other ones, like i mentioned in the solution and I guess that's what you asked for.

WillKre Over a year ago

Ah, I didn't see the comment. Thanks!

John · Accepted Answer · 2016-03-21 23:26:50Z

0

try this

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

answered Mar 21, 2016 at 23:26

John

7705 silver badges12 bronze badges

Comments

mendez7 · Accepted Answer · 2016-03-21 23:39:25Z

0

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

  });

answered Mar 21, 2016 at 23:39

mendez7

1951 gold badge3 silver badges14 bronze badges

Comments

Carlton · Accepted Answer · 2016-03-21 23:43:18Z

0

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

edited Mar 21, 2016 at 23:43

answered Mar 21, 2016 at 23:28

Carlton

8486 silver badges17 bronze badges

4 Comments

Keith Over a year ago

I would think using val(); would be better rather than text

blex Over a year ago

Hint: var string = $("#result"); string = ""; is non-sense.

Keith Over a year ago

I'm not at a computer, but I would try something like a for each loop, taking all values and then adding then together

Carlton Over a year ago

Try looking at the updated Codepen I posted above. The solution is working. codepen.io/anon/pen/WwpPQY

Collectives™ on Stack Overflow

jQuery: Add to html string when clicking on button

4 Answers 4

3 Comments

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related