使用点击事件信息填充文本字段

Question

HTML

<div id="wrapper">
  <input type="text" id="text">
  <button id="t-1" value="1">1</button>
  <button id="t-2" value="2">2</button>
  <button id="t-3" value="3">3</button>
</div>

JavaScript

$(function() {

    $('#wrapper').click(function(event) {

      $('#text').append(event.target.value);

    });

  });

Clicking the button does not change the text-field-value!

Answer 1

Use this:

$(document).ready(function(){
    $('#wrapper').click(function(event) {    
      $('#text').val(event.target.value);
    });
});

Remember append is to add HTML content, whereas val is to get and set the input field value.

Answer 2

append adds HTML content after the input. What you are looking for (changing the text of the input) is val .

Answer 3

You need to use val() to set value of a textbox. append() is used to append a DOM element into another element (like appending dynamic li into ul tags). Below is a working snippet

 $(function() { $('#wrapper').click(function(event) { $('#text').val(event.target.value); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <input type="text" id="text"> <button id="t-1" value="1">1</button> <button id="t-2" value="2">2</button> <button id="t-3" value="3">3</button> </div>