使用javascript填充两个单独的输入字段，其中包含由多个按钮传入的唯一文本值

Question

Working on a small personal project with jQuery and JavaScript. This is a one page app on a static website.

The game (if you can call it that) asks the user to select 2 characters from the selection area and pressing enter transfers the input to the "battle-area" where when you hit the "fight" button random numbers are subtracted form the characters hitpoints as attack dmg.

I am stuck on the selection part. I need two separate input fields populated with unique names. I am able to write text into the field and transfer it but I want the input fields to be populated by clicking on the individual pictures on the screen. My code seems to populate both fields at once. I can hardcode two buttons to each populate one input field, the problem is that I have about 15 image buttons and I need to be able to click either of those to populate the fields.

function selectFighter(name) {


  var x = name;

  var input = $('#fighter1_name').val();

  $('#fighter1_name').val(x);

  if ($('#fighter1_name').val() != "") {
    $('#fighter2_name').val(x);
  }
}

I have tried to add a condition that checks the first input field for a value and if it is NOT empty, to instead write the input into the second field. But that is causing one button click to populate both fields. I need one button click to populate one field, and then when I click another button to populate the other, empty field.

I am passing in a name with an onclick event: onclick="selectFighter('bob');"

Problem is when I click the image, both fields are populated with the same name. I want to be able to click an image to populate one input field, and then click a different image and put that name in the input field.

Answer 1

This should do the trick. We're checking if the first field has a value - if so, we populate the second one - otherwise the first one.

function selectFighter(name) {
  if ($('#fighter1_name').val()) {
    $('#fighter2_name').val(name);
  } else {
    $('#fighter1_name').val(name);
  }
}

Answer 2

Add a class to the elements you click, and an ID, and remove all inline javascript.

Then add a script tag with the event handler targeting the elements

 $('.toBeClicked').on('click', function() { var x = $(this).data('name'); // note that "name" is not a good name for a variable var f1 = $('#fighter1_name'); var f2 = $('#fighter2_name'); f1.val() === "" ? f1.val(x) : f2.val(x); }); $('#clear').on('click', function() { $('input[id^=fighter]').val("") }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="toBeClicked" data-name="bob">Bob</button> <button class="toBeClicked" data-name="jon">Jon</button> <button class="toBeClicked" data-name="ann">Ann</button> <br><br> Fighter 1 <input id="fighter1_name"><br> Fighter 2 <input id="fighter2_name"> <br><br> <button id="clear">Clear</button>