从 2 个输入中获取并同时替换

Question

我有两个文本区域 inp1 和 inp2，我想从这两个文本区域获取输入，并在它的位置添加eatch 输入，该段落将显示在名为“disp1”的 div 上。

我已经能够通过仅来自一个 input(inp1) textarea 的单个输入来做到这一点，但我真的不知道如何同时为两者做到这一点。

这是我的一个输入的工作代码：http://jsfiddle.net/1rsqn8g5/

$('#inp1').on('input', function(e) {
$("#disp1").html("heloo, this is the word you entered:" + $(this).val() + "</br>Thanks");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<textarea id="inp1" rows="4" cols="50" name="inp1"></textarea></br></br>


<a id="disp1" target="_blank">  </a>

我想将两个文本区域合并到一个输出容器中，例如，我在第一个文本区域中输入单词“Silicon”，在第二个文本区域中输入“山谷”，然后得到这样的文本：

你输入的词是：silicon and valley。

谢谢

Answer 1

const intro = "you entered the words: ";
const outro = "</br>Thanks";
let input1 = '';
let input2 = '';

$('#inp1, #inp2').on('input', function update(e) {
  if (e.currentTarget.id === 'inp1') {
    input1 = e.currentTarget.value;
  } else {
    input2 = e.currentTarget.value;
  }
  $("#disp1").html(intro + '<br>' + input1 + ' and ' + input2 + outro);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<textarea id="inp1" rows="4" cols="50" name="inp1"></textarea></br>
</br>
<textarea id="inp2" rows="4" cols="50" name="inp1"></textarea></br>
</br>


<a id="disp1" target="_blank"> </a>