javascript - 使用javascript使用多个按钮传入的唯一文本值填充两个单独的输入字段

Question

使用 jQuery 和 JavaScript 开发一个小型个人项目。这是静态网站上的单页应用程序。

游戏(如果你可以这样调用它的话)要求用户从选择区域中选择 2 个字符，然后按回车键将输入转移到“战斗区域”，当你点击“战斗”按钮时，随机数会被减去将 Angular 色生命值形成为攻击伤害。

我卡在了选择部分。我需要两个单独的输入字段，其中填充了唯一的名称。我可以将文本写入字段并进行传输，但我希望通过单击屏幕上的各个图片来填充输入字段。我的代码似乎同时填充了这两个字段。我可以硬编码两个按钮，每个按钮填充一个输入字段，问题是我有大约 15 个图像按钮，我需要能够单击其中任何一个来填充字段。

function selectFighter(name) {


  var x = name;

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

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

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

我尝试添加一个条件来检查第一个输入字段的值，如果它不为空，则将输入写入第二个字段。但这导致单击一次按钮即可填充两个字段。我需要单击一个按钮来填充一个字段，然后单击另一个按钮来填充另一个空字段。

我正在通过 onclick 事件传入一个名称:onclick="selectFighter('bob');"

问题是当我单击图像时，两个字段都填充了相同的名称。我希望能够单击一张图像来填充一个输入字段，然后单击另一张图像并将该名称输入输入字段。

Answer 1

这应该可以解决问题。我们正在检查第一个字段是否有值 - 如果有，我们填充第二个 - 否则填充第一个。

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