First i selected all the input tags inside the contact form container and then added the click event listener and invoked a function. That doesn't work.

It throws an error saying : Uncaught TypeError: input.addEventListener is not a function.

<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>

.form-container {
  margin: 5rem 0;
  height: auto;
  // text-align: center;

  h1 {
    color: $header-main;
    font-size: 2rem;
    text-align: center;
  }

  .form {
    input[type="text"],
    textarea,button {
      display: block; 
      margin: 2rem auto;
      width: 600px;
      padding: 1rem;
      border-radius: 1rem;
      border: 2px solid #d6cfcf;
      outline: none;
    }
  }
}

<script>

    // contact form

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

    input.addEventListener('click', function () {
      console.log('che che che');
    });

  </script>

First i selected all the input tags inside the contact form container and then added the click event listener and invoked a function. That doesn't work.

It throws an error saying : Uncaught TypeError: input.addEventListener is not a function.

<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>

.form-container {
  margin: 5rem 0;
  height: auto;
  // text-align: center;

  h1 {
    color: $header-main;
    font-size: 2rem;
    text-align: center;
  }

  .form {
    input[type="text"],
    textarea,button {
      display: block; 
      margin: 2rem auto;
      width: 600px;
      padding: 1rem;
      border-radius: 1rem;
      border: 2px solid #d6cfcf;
      outline: none;
    }
  }
}

<script>

    // contact form

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

    input.addEventListener('click', function () {
      console.log('che che che');
    });

  </script>

• javascript
• html
• css
• addeventlistener

• 2 maybe is because you're not targeting a each dom element, you are adding the AddEventListener, to a array of objects – Black Hole Commented Apr 13, 2019 at 16:53

5 Answers 5

According to https://developer.mozilla/en-US/docs/Web/API/Document/querySelectorAll

document.querySelectorAll returns a nodeList which is an array. So you can't assign eventListener to all of them that way. You have to

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

Element.querySelectorAll() returns Array-like NodeList, it can be iterated by forEach().

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

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

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

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

You are trying to invoke the addEventListener-function on a HTMLCollection.

try this:

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');
});
}

Use for loop to iterate on each input element

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');
    });
}