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

3 posts were split to a new topic: Cannot read property addeventlistener of undefined

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

5

I am trying to convert this site http://buildandtest.atspace.cc/ into twentysixteen child theme. It appears that /js/menu.js in my child theme is not working as nothing happens when the ham icon button is clicked (pls.see my site link above to check correct behavior). On inspecting via Google Chrome Inspect I am getting the following errors:

Uncaught TypeError: Cannot read property ‘classList’ of null at mediaqueryresponse (menu.js?ver=5.3.2:19) at menu.js?ver=5.3.2:10 at menu.js?ver=5.3.2:31 mediaqueryresponse @ menu.js?ver=5.3.2:19 (anonymous) @ menu.js?ver=5.3.2:10 (anonymous) @ menu.js?ver=5.3.2:31

Any advice is appreciated

header.php in child theme

<header class="header" id='myTopnav'>

<?php
 wp_nav_menu(
             array(
                  'theme_location'=> 'topnav',
                  'container' => 'nav',
                  'menu_class' => 'topnav',
                  'menu_id'    => 'myTopnav',
                  )
 );?>

<button class="ham-icon"><span class="fa fa-bars fa-2x"></span></button>

</header>

/js/menu.js in child theme

(function () {
  var mql = window.matchMedia("screen and (max-width: 960px)");
  //detect media query

  var navTop = document.querySelector(".header");
  //return first element within the document that matches .header

  var toggle = document.querySelector(".ham-icon");

  mediaqueryresponse(mql);
  //ensures that addListener function is executed when the page loads, by default addListener only fires when state of the window changes
  mql.addListener(mediaqueryresponse);

  function mediaqueryresponse(mql) {
    if (mql.matches) {
      toggle.addEventListener("click", clickMenu);
      //if media query matches, execute click or clickMenu event
    } else {
      navTop.classList.remove("responsive");
      //otherwise remove .responsive
      toggle.removeEventListener("click", clickMenu);
      //and remove EventListener
    }

  }

  function clickMenu() {
    navTop.classList.toggle("responsive");
  }

})();

The above code did work when I used with a theme created from scratch, however, its not working with child theme.

6

the script works if I put it in in the footer.php of a child theme, however, its not working from /js/menu.js in child theme

7

The code seems to work for me on the example page that you gave the link for.

Do you have a link to a page where it doesn’t work?

8

I currently only have WordPress set up on my local Windows machine running WAMP server. I guess I would have to try move it to my webhost and then try provide the live link… :thinking: Would it work ?

Thanks for the quick response @Paul_Wilkins