Html Question posted in
Some basic documentation can be found here.

How to call functions from a JavaScript file in HTML

Ive been trying to link my three.js function into html so that when an element is clicked by the mouse the js function runs in the external js file. I thought i had done everything right and followed correct steps but still wont work

I’ve tried modifying the directories for librarys and external files and moving the script tag to see if it changes anything but its the kinda thing thats meant to work but it wont so i have run out of solutions.

Ive got the js file in the same folder and i am certain the function is named correctly

<!DOCTYPE html>
<html>

<head>

  <title> Solar System </title>
  <style>
    body {
      margin: 0;
    }

    canvas {
      width: 100%;
      height: 100%
    }
  </style>
</head>

<body>
  <script type="module" src="./index.js"> </script>

  <link href="./styles.css" rel="stylesheet" />
  <script src="js/threex.domevents.js"></script>
  <script src="./js/three.module.js"></script>
  <script src="./js/threex.linkify.js"></script>


  <div id="planet-menu">
    <ul>
      <li onclick="selectPlanet('Mercury')">Mercury</li>
      <li onclick="selectPlanet('Venus')">Venus</li>
      <li onclick="selectPlanet('Earth')">Earth</li>
      <li onclick="selectPlanet('Mars')">Mars</li>
      <li onclick="selectPlanet('Jupiter')">Jupiter</li>
      <li onclick="selectPlanet('Saturn')">Saturn</li>
      <li onclick="selectPlanet('Uranus')">Uranus</li>
      <li onclick="selectPlanet('Neptune')">Neptune</li>
    </ul>
  </div>



  <script type="module" src="./index.js "> </script>


</body>

</html>
Tags:

2

Answers


  1. 0

    I see you’ve used type=module. Variables/functions defined in a Module are not globally-scoped, and are therefore the selectPlanet() function does not exist in the scope you’re calling it.

    Login or Signup to reply.
  2. 0

    I noticed you have initialized the script on the head, and at the bottom, try to remove it from the head. (it’s best practice to add the script tag at the end of the body)

    and if you are using type="module"
    you should make the function global by writing the below code on your js file.

    window.selectPanel = selectPanel;

    or if you do not want to use the module, you can simply remove the type="module" form script tag

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search