Javascript 在input中输入信息，并在div'；同时删除文本内容

我是一个HTML JS初学者。 现在我正在做一个模因生成器项目，我遇到了一个问题

这是我的HTML代码

//this is input tag

<div>
<input type="text" placeholder = 'text' class="mtext">
<input type="text" placeholder = 'text' class="mtext">
</div>

//this is my div block.

<div id = "meme">
     <div class="mtext1" style = 'left: 5px; top: 5px; width: 400px; height: 25px'></div>
     <div class="mtext1" style = 'left: 5px; top: 5px; width: 400px; height: 25px'></div>
</div>

第一个问题是什么addEventListener参数适合满足我的期望？我可以在文本框中键入，同时在div框中显示结果

第二个问题是我的inputText和showTextBox是类似数组的值，如何提取每个inputText的值并表示到右侧的showTextBox

---

谢谢

首先，您正在查找

更改

事件

其次，

inputText

和

showTextBox

并不是你想象的那样

document.querySelectorAll

提供一个节点列表，它只是一个html元素列表（例如-[elem1，elem2…]）。看见因此，

inputText

和

showTextBox

是列表

您需要为列表中的每一个元素添加一个

eventListener

：

inputText.forEach(element => {
  // add eventListener to every element in the list:
  element.addEventListener('change', function () {
    // element.value gives the value inside your input elements.
    // your code
  })
});

上面的代码将

change

eventListener放入每个

mtext

类

以下是您的操作方法：

const inputText = document.querySelectorAll('.mtext');
const showTextBox = document.querySelectorAll('.mtext1');

//element is current element, index is the current element's index
inputText.forEach((element, index) => {
  // add eventListener to every element in the list:
  element.addEventListener('change', function (e) {
    // element.value gives the value inside your input elements.
        showTextBox[index].innerText = element.value        
  })
});

这是你的电话号码

您也可以使用

键控

，但如下所述：

不应使用keyup（）的原因是，如果用户使用自动填充输入值，则不会触发keyup（）事件。但是，autofill会触发change（）事件，您的验证脚本将运行，输入将被验证

---

您正在寻找

keyup

事件吗？我没有完全理解您的问题。要再次更改

mtext1

文本：创建一个

changeText（）

函数，每当发生

change

事件时更新

mtext1

值。

inputText.forEach(element => {
  // add eventListener to every element in the list:
  element.addEventListener('change', function () {
    // element.value gives the value inside your input elements.
    // your code
  })
});

const inputText = document.querySelectorAll('.mtext');
const showTextBox = document.querySelectorAll('.mtext1');

//element is current element, index is the current element's index
inputText.forEach((element, index) => {
  // add eventListener to every element in the list:
  element.addEventListener('change', function (e) {
    // element.value gives the value inside your input elements.
        showTextBox[index].innerText = element.value        
  })
});