xxxxxxxxxx
<button onclick="alertFunction()"> Click</button>
<script>
function alertFunction() {
alert("Hello World");
}
</script>
xxxxxxxxxx
<!-- Best practice -->
<button id="btn1">Click me!</button>
<script>
document.getElementById("btn1")
.addEventListener("click", function() {
window.alert("You clicked me!");
});
</script>
<!-- Still valid, but prefer the above over this -->
<!-- (the above allows multiple and you can never 'overwrite' an event listener) -->
<button id="btn2">Click me!</button>
<script>
document.getElementById("btn2")
.onclick = function() {
window.alert("You clicked me!");
};
</script>
<!-- A different version of the previous -->
<button id="btn3" onclick="btn3ClickHandler()">Click me!</button>
<script>
function btn3ClickHandler() {
window.alert("You clicked me!");
}
</script>
xxxxxxxxxx
// html part
<button id="btn" onclick="alet()"></button>
// js part
let btn = document.getElemntById("btn")
function alet() {
alert("Hello the world")
}