Nekasus Nekasus - 1 year ago 51
Javascript Question

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

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.

HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://localhost/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="http://localhost/JOperations.js"></script>
</head>
<body>
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>


</body>
</html>

JS:
$(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";
})
})

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download