Populating two separate input fields with unique text values passed in by multiple buttons using 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.

Jon Uleis · Accepted Answer · 2017-08-21 20:42:43Z

2

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);
  }
}

answered Aug 21, 2017 at 20:42

Jon Uleis

18.9k3 gold badges36 silver badges45 bronze badges

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

1 Comment

Vladimir Mujakovic Over a year ago

wow, thank you! this is exactly what I was looking for haha. I implemented it just now and it worked.

adeneo · Accepted Answer · 2017-08-21 20:49:36Z

1

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>

edited Aug 21, 2017 at 20:49

answered Aug 21, 2017 at 20:43

adeneo

319k29 gold badges410 silver badges392 bronze badges

1 Comment

Jon Uleis Over a year ago

I like this direction, but this would need to be tweaked - OP mentions there are many fighter choices that could end up being in the fighter1_name or fighter2_name field. Might be better off just using two data attributes and no IDs.

Collectives™ on Stack Overflow

Populating two separate input fields with unique text values passed in by multiple buttons using javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related