Issue

This Content is from Stack Overflow. Question asked by yoons6

Button isn’t clicked in mobile and also github server.
It only works in my localhost…

I have cannot set properties of null (setting 'onclick') error on live server and github server(https://yyoonn12.github.io/three-js-webpack/).
However, it works in my localhost. No that error.
Also, hover event(turning color to white) is working…

I think something wrong in button click event code.

This is html code.

<body>
    <div id="overlay">
      <button id="startButton" type="button">HAPPY BIRTHDAY</button>
      <audio id="song" src=""></audio>
    </div>

    ...

    <script src="public/bundle.js"></script>
    <script src="https://r105.threejsfundamentals.org/threejs/resources/threejs/r105/js/controls/OrbitControls.js"></script>
</body>

This is js code.

if (WEBGL.isWebGLAvailable()) {
        
  //button
  const startButton = document.getElementById( 'startButton' );
  startButton.addEventListener("pointerdown",init);
...

  function init() {
    const overlay = document.getElementById( 'overlay' );

    setTimeout(function () {
      overlay.classList.add('bgFadeOut');
    }, 0);

    setTimeout(function () {
      overlay.remove();
    }, 1000);
  }
...
} else {

}

Help me.. Please…

Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.