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

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

如果您可以调用该游戏，它会要求用户从选择区域选择2个角色，然后按enter键将输入传输到战斗区域，当您点击“战斗”按钮时，将从角色生命值中减去随机数作为攻击dmg

我被困在选择部分。我需要两个单独的输入字段，用唯一的名称填充。我可以将文本写入字段并传输，但我希望通过单击屏幕上的单个图片来填充输入字段。我的代码似乎同时填充了这两个字段。我可以硬编码两个按钮，每个按钮填充一个输入字段，问题是我有大约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'

---

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

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

功能选择FighterName{ 如果$'fighter1_name'.val{ $'fighter2_name'.valname； }否则{ $'fighter1_name'.valname； } }

---

向单击的元素添加一个类和一个ID，并删除所有内联javascript

然后添加一个脚本标记，事件处理程序以元素为目标

$'.toBeClicked'。单击，函数{ var x=$this.data'name'；//请注意，name不是变量的好名称 变量f1=$'fighter1_name'； 变量f2=$'fighter2_name'； f1.val==？f1.valx:f2.valx； }; $'clear'。单击时，函数{$'input[id^=fighter]'.val} 上下快速移动 乔恩 安 战斗机1 战斗机2

---

哇，谢谢你！这正是我想要的，哈哈。我刚刚实现了它，它工作了。我喜欢这个方向，但这需要调整-OP提到有很多战斗机的选择，最终可能出现在fighter1_名称或fighter2_名称字段中。只使用两个数据属性而不使用ID可能会更好。