Cannot read property addeventlistener of undefined

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

    <script>

     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);**
     
    </script>

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.

2

What happens if you change this line to

var btnClear = myForm.button1;
2 Likes
3

Thanks, this works.

4