So, the major context is thats I trying to work with OOP in javascript. To do it, I need to import a class to another js file, and I learned that I need to work with a package.json file thats have:
{
"type":"module"
}
So my js files can work like a module, from what I understand. But with module js I cant allow a function to a onclick button property (I tried it), and I need to use button to get some inputs to my functions from the user. With some search, I think the best way to do it is with addEventListener, but nothing I tried worked. I've write some test files to try to learn how to use it and to simplify to you all. It's quite similar to my real code but it abstract the rest of my project. Hopefuly if I can do it with this test files, I can do it to my project as well. My test files are:
import TestClass from "./TestClass";
tc1 = new TestClass();
tc2 = new TestClass();
var btn = document.getElementById("test");
var btn2 = document.getElementById("test2");
var btn3 = document.getElementById("test3");
var btn4 = document.getElementById("test4");
function hello() {
alert("hello");
}
btn.addEventListener("click", hello);
btn2.addEventListener("click", hello, true);
btn3.addEventListener("click", function () {
alert("hello");
});
btn4.addEventListener("click", hello());
export { tc1, tc2 };<!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">
<title>Document</title>
</head>
<body>
<button id="test">test</button>
<button id="test2">test</button>
<button id="test3">test</button>
<button id="test4">test</button>
<script src="test.js"></script>
</body>
</html>And my TestClass:
class TestClass {
constructor() {}
}
export default TestClass;And, remember, my package.json too. I created 4 buttons to try 4 different ways to do it but none of then work, I dont know what to do now.