Question 291946 in Html Question posted in
Some basic documentation can be found here.

Html – Event Listener is not calling function

I have an HTML/CSS file with a form and I’m trying to add an event listener to the button of the form.
The HTML looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    ... all css files here
</head>


<body class="registrationFormBody"> 
    <section class="sectionForms">

        <div class="serviceProviderRegistrationFormDiv">
            <form class="serviceProviderRegistrationForm">
                .... labels and inputs
                <button id="verifyProviderAddress" type="button" value="ProviderAddress">Verify</button>
            </form>
        </div>
    </section>
</body>
<script type="module" src="publicjsGeocode.js"></script>
</html>

I also have my Geocode file that correctly selects the button:

let buttonVerifyProviderAddress = document.getElementById("verifyProviderAddress");

buttonVerifyProviderAddress.addEventListener("click", () => onClickVerifyAddress());

function onClickVerifyAddress()
{
    window.alert("I'm in");
    console.log("Verifying");
}

I checked on the debugger, the event listener is there:

enter image description here

But it’s not calling it. When I click nothing happens. No console.log, no window alert.
What am I doing wrong?

I’ve tried already change the way of adding the listener:

buttonVerifyProviderAddress.addEventListener("click",()=>{console.log("Hey")});
buttonVerifyProviderAddress.onclick = ()=>{console.log("Ola");};

But nothing happens.
I think something is preventing the event listener to actually call, but what? Does anyone have a clue?

Tags:

2

Answers


  1. 0

    Try this one

    const buttonVerifyProviderAddress = document.querySelector("#verifyProviderAddress");

buttonVerifyProviderAddress.addEventListener("click", onClickVerifyAddress);

function onClickVerifyAddress()
{
    window.alert("I'm in");
    console.log("Verifying");
}
    Login or Signup to reply.
  2. 0

    I think the problem is within the script tag. It has a type of module, can you try to remove the type attribute from the script tag and see if it works?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search