CODEWITHSUNDEEP
javascripthtmlgoogle-chromedom
Aaradhanah Appalo Eleven
Aaradhanah Appalo Eleven

Reputation: 31

Javascript getElementById does not work on chrome but works on Firefox

Good Morning, I have this code

document.getElementById("button").onclick = function () {
    document.getElementById("confirm").innerHTML = "Order Placed Cheack your email!";
    document.getElementById("button").style.display = "none";
}

The above code when executed works on Firefox but when I run it on Chrome Version 81.0.4044.138 (Official Build) (64-bit) or Edge or IE browser it does not gives any response

<!DOCTYPE html>
    <html>

        <head>
            <meta charset="UTF-8">
            <title>Form</title>
            <script defer src="form.js/"></script>
        </head>

        <body>
            <p id="confirm">Confirm order?</p>
            <button id="button">Submit</button>
        </body>
    </html>

Upvotes: 1

Views: 1773

Answers (2)

SAURABH
SAURABH

Reputation: 137

You are including your JavaScript before the DOM is ready so the click event is not getting attached properly due to fast loading of the JS file in Chrome V8 engine. Always remember to put your script tag just before the close of html tag. Also, you are missing type="text/javascript". 

<!DOCTYPE html>
    <html>

        <head>
            <meta charset="UTF-8">
            <title>Form</title>
        </head>

        <body>
            <p id="confirm">Confirm order?</p>
            <button id="button">Submit</button>
        </body>
        <script type="text/javascript" src="form.js"></script>
    </html>

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Two things, please put the <script src="form.js"></script> just before the body and also, remove the defer attribute and / after form.js:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Form</title>
    </head>

    <body>
        <p id="confirm">Confirm order?</p>
        <button id="button">Submit</button>
    </body>
    <script type="text/javascript" src="form.js"></script>
</html>

The above should work.

Upvotes: 1

Related Questions