how to I get a html button to work with a java script function?
Question
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>
2 answers
solution1
1 2022-06-06 19:51:25
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.
solution2
0 2022-06-06 19:49:48
**<button onclick="myfunction();">+</button>**应该是**<button id="alert-button">+</button>**
document.addEventListener('DOMContentLoaded', (event) => { document.getElementById("alert-button").addEventListener('click', function(){ myFunction(); }) });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.