未捕获的ReferenceError：在HTMLAnchorElement.onclick上未定义myFunction

Question

我正在创建一个带有响应式粘性导航栏的网页。我将其创建为具有粘性，但响应性无法完全发挥作用，即，带有汉堡包图标的导航栏越来越短，但该图标的onClick无法正常工作。

document.addEventListener('DOMContentLoaded', function() {

  window.addEventListener('scroll', myFunctionForSticky);
  var navbar = document.getElementById("myTopnav");
  var sticky = navbar.offsetTop;

  function myFunctionForSticky() {

    if (window.pageYOffset >= sticky) {
      navbar.classList.add("sticky");
    } else {
      navbar.classList.remove("sticky");
    }
  }

  function myFunctionForResponsive() {
    navbar.classList.toggle("responsive");
  }

})

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#career">Careers</a>
  <a href="#fellowship">Fellowship 2018</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunctionForResponsive()">
    <i class="fas fa-bars"></i>
  </a>
</div>