静音/取消静音切换按钮不起作用

Question

我实现了使用three.js元素在页面上静音背景声音的代码，但它不起作用，因为切换按钮不可点击。虽然在没有three.js的页面上它可以工作。

有人可以帮我找出可能存在的问题吗？我是否将脚本部分放在了错误的位置？

</div>
<audio id="background_audio" autoplay="autoplay">
    <source src="sounds/10_EtherealSpace.wav" />
    </audio>
<div>
  <a href="#noscroll" id="mute"><img id="mutebutton" src="https://image.flaticon.com/icons/png/128/189/189653.png"></a>
</div>

<div id="container">
  <script>
    var container, stats;
    var camera, scene, renderer;
    var group;
    var mouseX = 0,
      mouseY = 0;
    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;
    init();
    animate();



    function render() {
      camera.position.x += (mouseX - camera.position.x) * 0.05;
      camera.position.y += (-mouseY - camera.position.y) * 0.05;
      camera.lookAt(scene.position);
      group.rotation.y -= 0.003;
      renderer.render(scene, camera);
    }
    var audio = document.getElementById('background_audio');

    document.getElementById('mute').addEventListener('click', function(e) {
      e = e || window.event;
      audio.muted = !audio.muted;
      e.preventDefault();
    }, false);
  </script>


  </body>

  </html>