使用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/