how to I get a html button to work with a java script function?-CodePudding

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.

'''
<!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 >✎</button></td>
            <td>
                <div >
                    <button>-</button>
                    <div id="p1s1" >0</div>
                    **<button onclick="myfunction();"> </button>**
                </div>
            </td>
        </tr>

    </table>

</body>
</html>
'''

'''
function myfunction() {
    alert("hey");
}
'''

CodePudding user response：

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

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

CodePudding user response：

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>

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

And now it works for me.