Cannot read property addeventlistener of undefined

<form action="" name="form1">
       <textarea name="textarea1" id="" cols="40" rows="15"></textarea>
       <textarea name="textarea2" id="" cols="40" rows="15"></textarea>
        <input type="button" value="Clear event textarea" name="button1">


     var myForm = document.form1;
     var textArea1 = myForm.textarea1;
     var textArea2 = myForm.textarea2;
     var btnClear = myForm.button;

     function displayEvent(e){
       var message = textArea2.value;
       message = message + e.type + "\n";
       textArea2.value = message;

     function clearEventLog(e){
       textArea2.value = "";

     textArea1.addEventListener("change", displayEvent);
     textArea1.addEventListener("keydown", displayEvent);
     textArea1.addEventListener("keypress", displayEvent);
     textArea1.addEventListener("keyup", displayEvent);
     **btnClear.addEventListener("click", clearEventLog);**

When I pressed a button to clear the content in the textarea, the console log gives me an error
Uncaught TypeError: Cannot read property ‘addEventListener’ of undefined

Kindly help me.

What happens if you change this line to

var btnClear = myForm.button1;

Thanks, this works.