addEventListener functions not working in my javascript code

Question

I know my code has a bug, but I can't find it

my code:

<!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>live site</title>

</head>

<body>
    <textarea name="" id="text_box" cols="30" rows="10" style="font-size: 2em;font-family: cursive;"></textarea>
    <div id="sub" style="background: #9e9eff;width: 135px;text-align: center;padding: 7px;border-radius: 7px;font-family: fangsong;font-size: 23px;">Submit</div>

</body>


<script>
    var sub = document.getElementById('sub');
    sub.onclick = fun;
    sub.addEventListener("mouseover", sub_event("over"));
    sub.addEventListener("mouseout", sub_event("out"))

    function fun() {
        let cor = document.getElementById('text_box');
        cor.value = cor.value.toLowerCase();
    }

    function sub_event(event) {
        switch (event) {
            case "over":
                sub.innerHTML = "Submit me!";
                break;
            case "out":
                sub.innerHTML = "Submit";
        }
    }
</script>

</html>

The addEventListener functions are not working in my code and I did a lot of tests but didn't get anywhere As if something is preventing the events from working

Your callback isn't a function. This is a strange setup. I'd do two spearate functions rather than a `switch` that retuns two different functions, once you do make them functions. — ggorlen, Aug 12 '22 at 14:22
One way to fix it: `sub.addEventListener("mouseover", () => sub_event("over"));` Another: `sub.addEventListener("mouseover", sub_event.bind(null, "over")));` — Ruan Mendes, Aug 12 '22 at 14:24

addEventListener functions not working in my javascript code

0 Answers0