Get value of editable <td> tags through onchange function?

Question

I am trying to get the value of tag which is set editable, in Javascript. code given below

<td class="cent" contenteditable='true' id="value_per_visit" 
onchange="myFunction()"> -- </td>

Here is my javascript code

<script type="text/javascript">
function myFunction() {
  var x = document.getElementById("value_per_visit").value;
  document.getElementById("value_per_visit").innerHTML ="gotit";
  alert("asad");
}


</script>

But i am not able to reach the function. Is there any solution?

Answer 1

Im not actually sure can you add onchange or oninput event attributes to td element..

The oninput attribute fires when the value of an or element is changed. The oninput event is similar to the onchange event, however the oninput event happens immediately after the value of an element has changed, while onchange occurs when the element loses focus. The other difference is that the onchange event also works on 'keygen and 'select' elements. https://www.w3schools.com/tags/ev_oninput.asp

Reading that it appears you cant use neither oninput nor onchange with <td>

Adding an event listener on your element should do the trick and I think this is much cleaner as there is no need to add extra functionality into your underlying html.

//html
<table>
  <td class="cent" contenteditable='true' id="value_per_visit">data here</td>
</table>

//js
var td = document.getElementById('value_per_visit')

td.addEventListener('input', function(){
    console.log(td.innerHTML)
})