event.target.innerHTML not returning current value

Question

I am trying to do data validation on an editable field using an onchange event trigger. When the event fires, I am passing the event. My function tries to display the innerHTML in an alert but it always returns null.

Here is my code:

<head>
<script>
   function chkchg(evt) {
     alert(evt.innerHTML);
   }
</script>
</head>
<body>
  <table>
    <tr>
    <td><input class='patched' contenteditable='true' type='text' onchange='chkchg(event.target);' value='Yes'></td>
    <td><input class='excluded' contenteditable='true' type='text' onchange='chkchg(event.target);' value='No'></td>
    </tr>
  </table>
</body>

It seems pretty simple but I don't know what is wrong.

`innerHTML` returns the HTML between tags like `
HTML
`. You however are trying to get the `value`. [See this answer for that.](http://stackoverflow.com/questions/4173391/javascript-get-element-value) — samiles, Oct 31 '16 at 15:06

J_Everhart383 · Answer 1 · 2016-10-31T14:45:31.400

0

Try passing in only the event to the chkchg function and reference the target property inside of the function. But the real fix here is referencing the value property of the input instead of innerHTML:

<head>
 <script>
  function chkchg(evt) {
   alert(evt.target.value);
  }
 </script>
 </head>
 <body>
  <table>
   <tr>
   <td><input class='patched' contenteditable='true' type='text'   onchange='chkchg(event);' value='Yes'></td>
   <td><input class='excluded' contenteditable='true' type='text' onchange='chkchg(event);' value='No'></td>
  </tr>
 </table>

edited Oct 31 '16 at 14:45

answered Oct 31 '16 at 14:26

J_Everhart383

354
1
6

I get the same results - a null alert. – T Riley Oct 31 '16 at 14:33
Ok, you need to reference value of input since that is target of event. innerHTML would have worked if you were referencing the td – J_Everhart383 Oct 31 '16 at 14:46
That was it! I need to access value instead of innerHTML. Thanks! – T Riley Oct 31 '16 at 15:51

VDWWD · Answer 2 · 2016-10-31T14:51:29.583

If you want the value of the input, why not use this.value. And innerHTML won't work on input fields. you need to use value.

<script>
    function chkchg(evt) {
        alert(evt);
    }
</script>
<table>
    <tr>
        <td>
            <input class='patched' contenteditable='true' type='text' onchange='chkchg(this.value);' value='Yes'></td>
        <td>
            <input class='excluded' contenteditable='true' type='text' onchange='chkchg(this.value);' value='No'></td>
    </tr>
</table>

Or using this. You then can access other properties.

<input class='patched' id='patched' contenteditable='true' type='text' onchange='chkchg(this);' value='Yes'>

<script>
    function chkchg(evt) {
        alert(evt.id + " - " + evt.value);
    }
</script>

event.target.innerHTML not returning current value

2 Answers2