Question

首先，我选择了联系表单容器内的所有输入标签，然后添加了click事件侦听器并调用了一个函数。那不行

它抛出一个错误，说：未被捕获的TypeError：input.addEventListener不是函数。

   Year  Month      Week  numOfTrips
0  2011  July       5     2608
1  2011  August     1     6852
2  2011  August     2     8092
3  2011  August     3     7674
4  2011  August     4     7065
5  2011  August     5     3896
6  2011  September  1     4182
7  2011  September  2    7315
8  2011  September  3    8929
9  2011  September  4    7822
10 2011  September  5    6508
11 2011  October    1    1848
12 2011  October    2    9233
13 2011  October    3    7818
14 2011  October    4    7627
 .   .      .        .      .
 .   .      .        .      .
 .   .      .        .      .

#include<iostream> 
#include<string>
using namespace std;


int min(int x, int y, int z)
{
return min(min(x, y), z); // here VS flags error
}

int editDist(string str1, string str2, int m, int n)
{

if (m == 0) return n;


if (n == 0) return m;

if (str1[m - 1] == str2[n - 1])
    return editDist(str1, str2, m - 1, n - 1);

return 1 + min(editDist(str1, str2, m, n - 1),    
    editDist(str1, str2, m - 1, n),   
    editDist(str1, str2, m - 1, n - 1)
);
}


int main()
{
string str1 = "sunday";
string str2 = "saturday";

cout << editDist(str1, str2, str1.length(), str2.length());

return 0;
 }

<div class="form-container">
    <h1>SEND US A MESSAGE</h1>
    <div class="form">
      <input type="text" placeholder="Full Name">
      <input type="text" placeholder="E-Mail">
      <textarea name="Message" id="message" cols="30" rows="10" placeholder="Message"></textarea>
      <button><i class="fa fa-paper-plane" aria-hidden="true"></i>SEND</button>
    </div>
  </div>

Answer 1

const listOfInput = document.querySelectorAll('.form-container input')

for (let input of listOfInput) {
  input.addEventListener('click', function () {
    console.log('che che che');
  });
}

Answer 2

您正在尝试在HTMLCollection上调用addEventListener-函数。

尝试：

const input = document.querySelectorAll('.form-container input');
for(let i = 0; i < input.length; i++){
input[i].addEventListener('click', function () {
  console.log('che che che');
});
}

Answer 3

根据 https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

document.querySelectorAll返回一个nodeList，它是一个数组。因此，您不能以这种方式将eventListener分配给所有它们。你必须

input.forEach( inp => inp.addEventListener(...))

Answer 4

使用for循环迭代每个输入元素

const input = document.querySelectorAll('.form-container input');

for (var i = 0 ; i < input.length; i++) {
     input[i].addEventListener('click', function () {
      console.log('che che che');
    });
}

Answer 5

Element.querySelectorAll()返回类似数组的NodeList，可以通过forEach()进行迭代。

const input = document.querySelectorAll(`.form-container input`);

input.forEach( function(element){
    element.addEventListener(`click`,function(){
        console.log(`clicked`);
    });
});

未捕获到的typeError：input.addEventListener不是函数

5 个答案: