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>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
Change this
<script src="script.js" type="module"></script>
To
<script src="script.js"></script>
And now it works for me.
**<button onclick="myfunction();">+</button>**
should be
**<button id="alert-button">+</button>**
document.addEventListener('DOMContentLoaded', (event) => { document.getElementById("alert-button").addEventListener('click', function(){ myFunction(); }) });