在输入中输入信息，并同时显示div的textContent上的信息

debugcn 发表于 Dev

苏凯文

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

这是我的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处表示呢？

谢谢

贝基

首先，您正在寻找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，但是正如本文所讨论的：