event listener for all input and get value on change

by Keval Bhatt

HTML

<td class="col-md-4">
        <label for="lab1"><b>1</b></label>                                
        <input type="text" class="form-control input-sm" id="lab1" />                    
      </td>
        <td class="col-md-4">                                                            
        <label for="lab2"><b>2</b></label>
        <input type="text" class="form-control input-sm" id="lab2"  />                   
      </td>
    <td class="col-md-4">                                                                
        <label for="lab3"><b>3</b></label>                                
        <input type="text" class="form-control input-sm" id="lab3" />                    
      </td>
      </tr>
   <tr>                                                                                  
       <td class="col-md-4">                                                             
        <label for="lab4"><b>4</b></label>                           
        <input type="text" class="form-control input-sm" id="lab4" />                    
      </td>

JavaScript

var input = document.querySelectorAll('input');
console.log(input)
for(var i=0;i<input.length;i++){
input[i].addEventListener('input', function()
{  console.log(input)
    console.log(i)
    console.log('this input changed to: ', this.value);
    console.log('[i] input changed to: ', input[i]);
   
});

}