使用javascript通過多個按鈕傳入具有唯一文本值的兩個獨立輸入字段

Question

使用jQuery和JavaScript處理小型個人項目。這是一個靜態網站上的單頁應用程序。

遊戲（如果你可以稱之爲）要求用戶從選擇區域中選擇2個字符，然後按回車將輸入傳輸到「戰鬥區域」，當你點擊「戰鬥」按鈕時，隨機數字是從字符生命值減去形成攻擊傷害。

我被困在選擇部分。我需要兩個單獨的輸入字段填充唯一的名稱。我可以將文本寫入字段並傳輸，但我希望通過單擊屏幕上的各個圖片來填充輸入字段。我的代碼似乎一次填充兩個字段。我可以硬編碼兩個按鈕，每個填充一個輸入字段，問題是我有大約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>