onclick event not triggered when onchange triggered right before

Question

i have a funny problem here.

I have a textarea with an onchange event linked to it. Then i have a button linked to an onclick event.

The text being put to th

Answer 1

You need to recheck your assumptions. In your example, alert() interrupts the program flow, breaking handling of onclick. This code (jsfiddle here) demonstrates that onchange does not interfere with onclick by default:

<textarea onchange="processText();" name="mytext"></textarea>
<button onclick="processButton();">Hello</button>
<div id="clicked"></div>
<div id="changed"></div>
<script language="Javascript">
  function processText()
  {
    document.getElementById('changed').innerHTML = "onchange fired";;
  }

  function processButton()
  {
    document.getElementById('clicked').innerHTML = "onclick fired";
  }
</script>​

I had a similar problem, but the actual reason that the onclick event was not handled was that the element being clicked, scrolled down as a result of the onchange handler. When the mouse button was released, the element did not receive a mouseup event and the "click" was interrupted.

Answer 2

handle onblur event on textarea and onclick event on button

Answer 3

try this to add event listener to components

document.getElementsByTagName("textarea")[0].addEventListener("change", function(){
    alert( 'textarea');
});

document.getElementsByTagName("button")[0].addEventListener("click", function(){
    alert( 'button');
});

if Ids are defined then use getElementById().