How to get value of input tag that changes?-CodePudding

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>

CodePudding user response：

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>