let’s start with two files index.html and script.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>click me</button>
<div></div>
<script src="script.js"></script>
</body>
</html>
const buttonUser = document.querySelector("button");
const divUser = document.querySelector("div");
buttonUser.addEventListener("click", () => {
divUser.innerHTML = `
<h1> welcome to the page </h1>
<button onclick="welcomeMassage()"> click me 2 <button>
`
})
function welcomeMassage() {
console.log("Hello World!");
}
if i clicked in the first button the addEventListener work and adding h1 and second button two divUser adn if i click on the second one it’s also work and console.log(“Hello world”) but :::::::
if change the javascript file two script.mjs and index.js
<script type="module" src="script.mjs"></script>
When I click on the first button, the addEventListener works, but when I click on the second button, it does not work and shows up in the console. The welcomeMassage function is not defined, and I can’t access it from the console. So why has this happened, and how can I prevent this behavior?
i want when use scritp.mjs file and i click in the button not show in console functionNamve not defined and perform the function
