将多个输入字段实时更新为多个跨度标签答案

【问题标题】：Live update multple input fields to multiple span tags将多个输入字段实时更新为多个跨度标签
【发布时间】：2021-01-23 14:18:00
【问题描述】：

我有一个表单，我希望用户能够在文本字段中输入数据，但是我希望在输入每个字符时将其输入到 span 标签中。

我已经成功地使用this post 中的大多数javascript 将一个输入字段转到一个跨度标记来完成此操作。但稍作更改以尝试将多个输入字段容纳到多个跨度标签。

但是当我有多个要实时更新到多个跨度标签的文本字段时，我似乎无法让它工作。例如：

我希望这个输入实时更新到下面的 span 标签：

<input type="text" class="inst_name">

<span class="nametag"></span>

我希望这个输入能够实时更新这个 span 标签：

<input type="text" class="keypair_name">

<span class="keyname"></span>

但是当我这样做时，它适用于第一个（inst_name 到 nametag），但是当我尝试使用第二个（keypair_name 到 keyname）时，它一直在我的 html 中显示为未定义的文本应该实时更新的位置到，但代码实际上并没有产生任何错误。

以下是我尝试过的 JavaScript 代码：

var inputKeyName = document.querySelector(".keypair_name"),
outputKeyName = document.querySelector(".keyname"),
inputInstName = document.querySelector(".inst_name"),
outputInstName = document.querySelector(".nametag");

function keydownHandler() {
    outputKeyName.innerHTML = inputKeyName.value;
}

function keydownHandlerInstName() {
    outputInstName.innerHTML = inputInstName.value;
}

inputKeyName.addEventListener("input", keydownHandler);
inputInstName.addEventListener("input", keydownHandlerInstName);

任何关于我如何使它工作的想法将不胜感激。谢谢

【问题讨论】：

使用onkeyup。
它按预期工作
按预期工作 jsfiddle.net/94nua1xw 。你用的是什么浏览器？
<span> 或 <input> 是从 js 中附加的还是什么？
我正在使用 Chrome，但我刚刚使用了您的 jsfiddle 链接，它似乎在那里工作？我在 Firefox 和 Edge 上也试过了，还是不行？

标签： javascript html

【解决方案1】：

所以我发现了问题所在。在我的 html 中两次使用相同名称的菜鸟错误。我为输入字段的类名“inst_name”使用了相同的名称，并且在我的代码中的其他地方使用了相同的名称，但我没有意识到它们的名称完全相同。感谢您发表评论并确认这是有效的。

【讨论】：