CODEWITHSUNDEEP
javascriptjqueryhtml
Vladimir Mujakovic
Vladimir Mujakovic

Reputation: 680

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

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.

Upvotes: 1

Views: 251

Answers (2)

adeneo
adeneo

Reputation: 318232

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>

Upvotes: 1

Jon Uleis
Jon Uleis

Reputation: 18649

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

Upvotes: 2

Related Questions