在输入中输入信息并同时显示 div 文本内容上的信息

Question

我是一个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"解决这个问题。

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

inputText.addEventListener('????' , function(){
showtextbox.textContent += 
})

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

第二个问题是我的inputText和showTextBox是数组式的值，我如何提取每个inputText的值，并表示到正确的showTextBox?

谢谢

Answer 1

首先，您正在寻找change事件。查看此网站

// this code is wrong, read below.
inputText.addEventListener('change' , function(){
// code
});

第二，inputText和showTextBox不是你想的那样。

document.querySelectorAll给你一个NodeList，这只是一个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
})
});

上面的代码将changeeventListener放到每个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()的原因是，如果用户使用自动填充输入值，则不会触发keyup()事件。但是，autofill会触发change()事件，并且您的验证脚本将运行，并且输入将被验证。