How to get value of input tag that changes?

April 22, 2022

Basically, I wrote this function in JavaScript:

 <script>
  function getVal(value) {
  console.log(value);
  }
 </script>

And this is my HTML input tag:

<input onchange="getVal(this.value)" type="text" id="unit" />

I am expecting to get value of this element printed in console (which I don’t).
I am not manually typing in value of element but rather setting it with this piece of code:

  <script>
    
                var table = document.getElementById('table');
                
                for(var i = 1; i < table.rows.length; i++)
                {
                    table.rows[i].onclick = function()
                    {
                         //rIndex = this.rowIndex;
                         document.getElementById("unit").value = this.cells[0].innerHTML;

                    };
                }
    
         </script>

>Solution :

I just changed the index starting from 0 instead of 1 when looping through the table rows and added the dispatchEvent call to fire the event on the input text so that its handler will run.

Please let me know if there’s something I didn’t get correctly in your question.

function getVal(value) {
  console.log(value);
}

let table = document.getElementById('table');

for(var i = 0; i < table.rows.length; i++)
{
  table.rows[i].onclick = function()
  {
    let unit = document.getElementById("unit");
    unit.value = this.cells[0].innerHTML;
    unit.dispatchEvent(new Event('change'));     
  };
}

table#table{
  width: 100%;
}

table#table tr:hover{
  background: lightgray;
  cursor: pointer;
}

table#table tr td{
  border: solid 1px black;
}

<input onchange="getVal(this.value)" type="text" id="unit" />

<table id="table">
  <tr>
    <td>Row1</td>
  </tr>
  <tr>
    <td>Row2</td>
  </tr>
  <tr>
    <td>Row3</td>
  </tr>
</table>