43 lines
1.2 KiB
HTML
43 lines
1.2 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>JS Tester</title>
|
|
</head>
|
|
<body>
|
|
<div class="output"></div>
|
|
<input type="text" name="message" placeholder="Your Message">
|
|
<button class="btn1">Button 1</button>
|
|
<button class="btn2">Button 2</button>
|
|
<div>
|
|
<button class="btn3">Log</button>
|
|
</div>
|
|
<script>
|
|
const myInput = document.querySelector("input[name='message']");
|
|
const output = document.querySelector(".output");
|
|
const btn1 = document.querySelector(".btn1");
|
|
const btn2 = document.querySelector(".btn2");
|
|
const btn3 = document.querySelector(".btn3");
|
|
const log = [];
|
|
btn1.addEventListener("click", tracker);
|
|
btn2.addEventListener("click", tracker);
|
|
btn3.addEventListener("click", (e) => {
|
|
console.log(log);
|
|
});
|
|
function tracker(e) {
|
|
output.textContent = myInput.value;
|
|
const ev = e.target;
|
|
console.dir(ev);
|
|
const temp = {
|
|
message: myInput.value,
|
|
type: ev.type,
|
|
class: ev.className,
|
|
tag: ev.tagName
|
|
};
|
|
log.push(temp);
|
|
myInput.value = "";
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|