JQuery: Trying to append numbers into a text area on button click

Question

I am having trouble getting one of my buttons to append data to a HTML text area. The button in question is "BPI". I am trying to append a few digits of pi to my first text area. The other 4 buttons operate within the 2nd text area. Thank you in advance for your help.

$(document).ready(function() {
  $('#BAddition').click(function(e) {
    $('#TOperator').val() += "+";

  })

  $('#BSubtract').click(function(e) {
    $('#TOperator').val() += "-";
  })

  $('#BMultiplication').click(function(e) {
    $('#TOperator').val() += "*";
  })

  $('#BDivision').click(function(e) {
    $('#TOperator').val() += "/";
  })

  $('#BPI').click(function(e) {
    $('#TFirstnum').val() += "3.141592657";
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Input:<br>
<textarea id="TFirstnum"></textarea>
<textarea id="TOperator"></textarea>
<textarea id="TSecondnum"></textarea>
<label id="LEquals"></label>
<br>
<button type="button" onclick="" id="BAddition">+</button>
<button type="button" onclick="" id="BSubtract">-</button>
<button type="button" onclick="" id="BDivision">/</button>
<button type="button" onclick="" id="BMultiplication">*</button>
<button type="button" onclick="" id="BPI">&#960;</button>
<button type="button" onclick="" id="BEquals">=</button>

try $('#TOperator').val($('#TOperator').val() + "+")

Carsten Løvbo Andersen
– Carsten Løvbo Andersen

2017-08-17 11:33:54 +00:00
Commented Aug 17, 2017 at 11:33 — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Aug 17, 2017 at 11:33

Carsten Løvbo Andersen · Accepted Answer · 2017-08-17 11:38:04Z

If you want to add a value use $(yourObject).val("yourvalue")

If you want to add a value to the already existing value use $(yourObject).val($(yourObject).val() + "yourvalue")

Working example below

$(document).ready(function() {
  $('#BAddition').click(function(e) {
    $('#TOperator').val($('#TOperator').val() + "+");

  })

  $('#BSubtract').click(function(e) {
    $('#TOperator').val($('#TOperator').val() + "-");
  })

  $('#BMultiplication').click(function(e) {
    $('#TOperator').val($('#TOperator').val() + "*");
  })

  $('#BDivision').click(function(e) {
    $('#TOperator').val($('#TOperator').val() + "/");
  })

  $('#BPI').click(function(e) {

    $('#TOperator').val($('#TOperator').val() + "3.141592657");
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Input:<br>
<textarea id="TFirstnum"></textarea>
<textarea id="TOperator"></textarea>
<textarea id="TSecondnum"></textarea>
<label id="LEquals"></label>
<br>
<button type="button" onclick="" id="BAddition">+</button>
<button type="button" onclick="" id="BSubtract">-</button>
<button type="button" onclick="" id="BDivision">/</button>
<button type="button" onclick="" id="BMultiplication">*</button>
<button type="button" onclick="" id="BPI">&#960;</button>
<button type="button" onclick="" id="BEquals">=</button>

Koby Douek · Accepted Answer · 2017-08-17 11:43:31Z

0

When you want to set an element's value attribute using Jquery, you need to set the value inside the parantheses: .val('newValue').

When you want to get an element's value, use blank parantheses: var x = elem.val().

So to concatenate (or append) values, you should use:

$('#TOperator').val($('#TOperator').val() + '+');

A longer version to elaborate:

var expr = $('#TOperator').val();  // Get current value
expr += '+';                       // Concatenate the + sign
$('#TOperator').val(expr);         // Set the new value

edited Aug 17, 2017 at 11:43

answered Aug 17, 2017 at 11:35

Koby Douek

16.7k21 gold badges79 silver badges110 bronze badges

1 Comment

Koby Douek Over a year ago

Are you getting an error? What is the expected result when you click this button? please try to explain.

Martijn · Accepted Answer · 2017-08-17 11:49:04Z

0

You are useing += which does not work. You have to get the value, and then set the value;

$('#BAddition').click(function(e) {
    $('#TOperator').val( $('#TOperator').val() + "+");
});

You're repeating yourself a lot. I suggest you change the html a bit and create a much neater function.

<button type="button" class="MathSign" data-sign="+">+</button>
<button type="button" class="MathSign" data-sign="-">-</button>
<button type="button" class="MathSign" data-sign="/">/</button>
<button type="button" class="MathSign" data-sign="*">*</button>

<button type="button" id="BPI">&#960;</button>
<button type="button" class="MathSign" data-sign="=">=</button>


// handle the [+ - * / =] in one go:
$('.MathSign').on('click', function(){
    $('#TOperator').val( $('#TOperator').val() + $(this).data('sign'));

    // Or,you can drop the data-sign attribute and use the content of the button
    $('#TOperator').val( $('#TOperator').val() + this.innerHTML);
})

edited Aug 17, 2017 at 11:49

answered Aug 17, 2017 at 11:38

Martijn

16.2k4 gold badges39 silver badges73 bronze badges

5 Comments

Carsten Løvbo Andersen Over a year ago

don't you have 1 " too much in data-sign="=""

Martijn Over a year ago

Thanks, fixed it :)

Carsten Løvbo Andersen Over a year ago

Not a problem :)

Nekasus Over a year ago

I didn't think of using HTML class attributes to be able to process the inputs of several buttons at once. Thanks you for helping me improve my program more :)

Martijn Over a year ago

Thats what we're for :) Just upvote the answers you like and maark the answer you think helped you most as answer

Anurag Singh Bisht · Accepted Answer · 2017-08-17 12:32:13Z

$(selector).val() is used to get the value of the input box.

If you want to set the value, you need to pass the value $(selector).val(value).

I have modified your example. One thing you need to consider is when you do $(selector).val(), you will get string. If you want to have addition instead of concatenation of two strings, You should probably use parseInt

$(document).ready(function() {
  $('#BAddition').click(function(e) {
    $('#TOperator').val($('#TOperator').val() + "+");
  })

  $('#BSubtract').click(function(e) {
    $('#TOperator').val($('#TOperator').val() + "-");
  })

  $('#BMultiplication').click(function(e) {
    $('#TOperator').val($('#TOperator').val() + "*");
  })

  $('#BDivision').click(function(e) {
    $('#TOperator').val($('#TOperator').val() + "/");
  })

  $('#BPI').click(function(e) {
    $('#TFirstnum').val($('#TFirstnum').val() + "3.141592657");
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Input:<br>
<textarea id="TFirstnum"></textarea>
<textarea id="TOperator"></textarea>
<textarea id="TSecondnum"></textarea>
<label id="LEquals"></label>
<br>
<button type="button" onclick="" id="BAddition">+</button>
<button type="button" onclick="" id="BSubtract">-</button>
<button type="button" onclick="" id="BDivision">/</button>
<button type="button" onclick="" id="BMultiplication">*</button>
<button type="button" onclick="" id="BPI">&#960;</button>
<button type="button" onclick="" id="BEquals">=</button>

I edited only the BPI button. Although I have edited other buttons also now.

Collectives™ on Stack Overflow

JQuery: Trying to append numbers into a text area on button click

4 Answers 4

Comments

1 Comment

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related