Event listener will stop working on an element after it changes (javascript only)

Please check the following executable example code ...

var inputform = document.getElementById('input-form');
var form = document.getElementById('message');
var input = document.getElementById('usermsg');

function change(value) {
  const form =`
    <form name="message" action="" id="message">
      <textarea  name="usermsg" id="usermsg"></textarea>
    </form>`;
  const div = `
    <div id="message">
      <div id="usermsg"></div>
    </div>`;
  var content = value == "div" ? div : form;

  inputform.innerHTML = content;
}

usermsg.addEventListener('keypress', function(e) {
  if (e.which == 13 && !e.shiftKey && input.value) {
    input.value = '';
  }
});

<div id="input-form">
  <form name="message" action="" id="message">
    <textarea  name="usermsg" id="usermsg"></textarea>
  </form>
</div>
<button onclick="change('div');">Press to div</button>
<button onclick="change('form');">Press to form</button>

I'am using this code to detect when a user clicks inside the element

usermsg.addEventListener('keypress', function(e) {
  if (e.which == 13 && !e.shiftKey && input.value) {
    input.value = '';
  }
});

It's supposed to be a listener but it will stop working if the element changes and even after, it changes back to its original form.

How can I prevent it from stop working with javascript only?

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW