function is not getting called in html

Question

Why am I getting this error? I have other javascript written which is working fine but none of my functions are running even if I put the function in script tag inside html. Am I calling the function wrong? HTML:

<!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>E-com Website</title>
        <link rel="stylesheet" href="style.css">
        <script src="https://kit.fontawesome.com/d9a6e0b5ab.js" crossorigin="anonymous"></script>
        <script  src="javascript.js" type="module"></script>
        
    </head>
    <body>
            
                <div class="cart navheading" onclick= "cart()" >
                    <i class="fa-solid fa-cart-shopping "></i>
                    <a href="#">Cart</a>
                </div>
    
            <div class="cartmenu" id="cartmenu" style="width: 0px;">
                <div class="topcart">
                    <i class="fa-solid fa-caret-left leftarr"></i>
                    <h3><a href="#">CONTINUE SHOPPING</a></h3>
                
                </div>
                
            </div>
            
        </header>

Javascript:

 var menu = document.querySelector('.cartmenu') // Using a class instead, see note below.


function cart() {
  menu.classList.toggle('show');
}

error:

Uncaught ReferenceError: cart is not defined

You get the error because modules do not have global variables. If you are going to use a module, use addEventListener, not inline events. — epascarello, Feb 14 '23 at 18:47
You should add an event listener in your JS instead of in the HTML — asportnoy, Feb 14 '23 at 18:48

function is not getting called in html

0 Answers0