使用JavaScript編輯HTML input元素

Question

我有沒有初始值的輸入標籤的內容，以三種文字元素一起：

<input type='text' value=''/> 
<p id='1'>Alpha</p> 
<p id='2'>Beta</p> 
<p id='3'>Gamma</p> 

我想要做什麼，通過JavaScript，是添加「當用戶點擊顯示'Alpha'的文本時，輸入值爲'alpha'。然後，如果用戶繼續點擊測試版，我想要將「測試版」添加到該值。所以如果用戶點擊alpha然後beta，我想輸入值是'alpha beta'。我需要這個工作，以便點擊三個單詞的任意組合。

換句話說，我正在尋找JavaScript來獲取一定的值，並將其添加到輸入值的末尾，而不是完全替換它。

任何幫助，將不勝感激。

Answer 1

我可以建議你使用jQuery。在HTML中，更新類和id：

<input type='text' value='' id='inputTarget'/> 
<p id='1' class='textInput'>Alpha</p> 
<p id='2' class='textInput'>Beta</p> 
<p id='3' class='textInput'>Gamma</p> 

在JS：

$('.textInput').onclick(function(){ 
    var t = $('#inputTarget').val(); 
    t += ' ' + $(this).text(); 
    $('#inputTarget').val(t); 
}); 

Answer 2

JavaScript的替代（I已經添加了一個id屬性到輸入）香草：

var inputTarget = document.getElementById("inputTarget"); 

var els = document.querySelectorAll("p"); 
for (var i = 0; i < els.length; i++) { 
    els[i].addEventListener("click", function(e) { 
    inputTarget.value = inputTarget.value + " " + e.target.innerHTML; 
    }); 
} 

https://jsfiddle.net/tfsrrny4/