updating text field display with javascript or jQuery

Question

I have two buttons and a text field. I want to update the display of the text field with the value of the buttons each time a button is pressed.

function displayTextfield() { 
  var amount;
  amount = document.getElementById('btn').value;
  document.getElementById('other-amount') = amount;
}

<button class="btn btn-default" id="btn" onclick='displayTextfield()' role="button" value="A">A</button>
<button class="btn btn-default" id="btn" onclick='displayTextfield()' role="button" value="B">B</button>
<input type="text" class="form-control donation-amount-input" placeholder="Other Amount" id="other-amount" onclick='displayTextfield()'/>

When I run the click the button I get the error:

Uncaught TypeError: Cannot read property 'value' of null

Change your third line inside the displayTextField function to document.getElementById('other-amount').value = amount; — NerdyGeek
– NerdyGeek, Commented Oct 6, 2018 at 22:39

Trident D'Gao · Accepted Answer · 2018-10-06 22:07:40Z

1

just add id="value" to <input type="text" class="form...

answered Oct 6, 2018 at 22:07

Trident D'Gao

19.9k22 gold badges101 silver badges169 bronze badges

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

Comments

Bryan Dellinger · Accepted Answer · 2018-10-06 22:16:52Z

1

hit run snippet below you can use a selector (I used the class btn) to target the buttons you are interested in. then take advantage of $(this) to get the value of the clicked button

$('.btn').click(function() {
  $('#other-amount').val($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <button class="btn btn-default" role="button" value="A">A</button>
    <button class="btn btn-default" role="button" value="B">B</button>
    <input type="text" class="form-control donation-amount-input" placeholder="Other Amount" id="other-amount" />

answered Oct 6, 2018 at 22:16

Bryan Dellinger

5,43210 gold badges40 silver badges90 bronze badges

1 Comment

dvdktn Over a year ago

Thank you, this is a simple solution.

Collectives™ on Stack Overflow

updating text field display with javascript or jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related