使用javascript填充兩個單獨的輸入字段，其中包含由多個按鈕傳入的唯一文本值

Question

使用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'）;”

問題是當我單擊圖像時，兩個字段都填充了相同的名稱。 我希望能夠單擊圖像以填充一個輸入字段，然后單擊其他圖像並將該名稱放在輸入字段中。

Answer 1

這應該可以解決問題。 我們正在檢查第一個字段是否有值 - 如果是，我們填充第二個字段 - 否則是第一個字段。

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

Answer 2

將類添加到您單擊的元素和ID，並刪除所有內聯JavaScript。

然后使用針對元素的事件處理程序添加腳本標記

 $('.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>