0

I have a button in a html file with that when clicked should run a function in a java script file that send an alert that says hey. This doesn't happen and I don' know why. It feels like the simplest thin but I just can't get it to work. Java Script is enabled in my browser (google chrome) I don't think it matters but just in case, I'm codeing in VS code.

function myfunction() {
  alert("hey");
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="script.js" type="module"></script>
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>

  <div id="head">
    <h1>Park Stats</h1>
  </div>

  <table>
    <tr id="head_row">
      <th>Player</th>
      <th>Points</th>
      <th>Rebounds</th>
      <th>Blocks</th>
      <th>Steals</th>
      <th>Fouls</th>
      <th>Scrum Wins</th>
      <th>Scrum Losses</th>
      <th>Assists</th>
    </tr>

    <tr>
      <td>Player Name<button class="name_button">✎</button></td>
      <td>
        <div class="container">
          <button>-</button>
          <div id="p1s1" class="stat">0</div>
          **<button onclick="myfunction();">+</button>**
        </div>
      </td>
    </tr>

  </table>

</body>

</html>
Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
Tyler K
  • 11
  • 1
  • Welcome to Stack Overflow! Not sure if all those single quotes are actually in your code, but this appears to be load order issue. What errors do you get in your developer console? – disinfor Jun 06 '22 at 19:50
  • It works in the snippet. Are you sure your own page is the same as in the question? – Lee Taylor Jun 06 '22 at 20:11

2 Answers2

1

If you are using your code local and not on a webserver you have to remove the attribute type="module". see:javascript modules and CORS

and MDN JavaScript modules

Change this

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

To

<script src="script.js"></script>

And now it works for me.

Jonathan
  • 131
  • 3
  • 3
    this has nothing to do with local and webserver. You can use modules locally just as fine. – The Fool Jun 06 '22 at 19:52
  • the issue is that things from a module are not exposed on the window object, so the reference in the html doesnt work. You could attach it to window from a module, and it would work. – The Fool Jun 06 '22 at 19:53
0

**<button onclick="myfunction();">+</button>** should be **<button id="alert-button">+</button>**

document.addEventListener('DOMContentLoaded', (event) => { document.getElementById("alert-button").addEventListener('click', function(){ myFunction(); }) });

Cedar
  • 11
  • 2
  • 1
    Welcome to Stack Overflow! While this might answer the question, explain **why** it should be that. Also, instead of wrapping your code in the backticks, use the Stack Snippet `<>` tool to add a working example. – disinfor Jun 06 '22 at 19:51