函数已声明但从未读取：Uncaught ReferenceError：函数未在 HTMLButtonElement.onclick 处定义

问题描述 投票：0回答：1

我正在尝试制作一个自动售货机页面。 我正在使用 2 个 js 文件和 2 个 html 文件

index.html

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="output.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"
    integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script type="module" src="script.js"></script>
    <title>Vending-Machine</title>
</head>
<body class="bg-[#121212]">
    <div class="container">
        <div class="topclass z-10 shadow-emerald-400 shadow-md">
            <nav class="mt-4 p-2 flex justify-between items-center border-b-violet-500 border-b-2">
                <img src="res/logo.png" alt="logo maybe...." class="w-[80px] rounded-full">
                <a class="hover:text-purple-500 text-white ml-12">Snacks</a>
                <a href="#quick-food" class="hover:text-purple-500 text-white">Quick-Food</a>
                <a href="#drinks" class="hover:text-orange-500 text-white">Drinks</a>
                <a href="./cart.html"><button><i class="fa fa-cart-plus text-[3ch] bg-gradient-to-r from-purple-500 to-orange-600 text-transparent duration-200 bg-clip-text hover:text-white transition ease-in-out"></i></button></a>
            </nav>
        </div>
        <div class="content ml-5">
            <div class="mt-4">
                <p class="text-3xl ml-3 bg-gradient-to-r from-purple-500 via-pink-500 to-orange-600 text-transparent bg-clip-text hover:translate-x-2 transition ease-in-out">Find Snacks Here <i class="fa fa-arrow-down"></i></p> 
            </div>
            <div class="flex gap-x-4 w-[90vw] overflow-x-auto" id="snacks">
            <div  class="flex flex-col flex-shrink-0">  
            <div>
                    <img src="res/snacks/skittels.jpg" alt="skittles img" class="w-[40vw]">
                    <p class="text-purple-400 text-center"><b>SKITTLES</b><br>Price: 100 ₹ <br>IN STOCK :<span id="skittelstock"> </span><br><button onclick="stockminus('skittelstock','sktnum','Skittles',100,'res/snacks/skittels.jpg')"><i class="fa fa-minus-circle"></i></button><span class="text-emerald-400" id="sktnum"></span><button onclick="stockplus('skittelstock','sktnum','Skittels',100,'res/snacks/skittels.jpg')"><i class="fa fa-plus-circle"></i></button></p>
                </div>
            </div>
            <div class="flex flex-col flex-shrink-0">   
                <div >
                    <img src="res/snacks/mnms.jpg" alt="mnm's img" class="w-[40vw]">
                    <p class="text-purple-400 text-center"><b>M&M's</b><br>Price: 100 ₹ <br>IN STOCK : <span id="mnmstock"></span><br><button  onclick="stockminus('mnmstock','mnmnum','M&M\'s')"><i class="fa fa-minus-circle"></i></button><span class="text-emerald-400" id="mnmnum"></span><button onclick="stockplus('mnmstock','mnmnum','M&M\'s')"><i class="fa fa-plus-circle"></i></button></p>
                </div>
            </div>
            <div class="flex flex-col flex-shrink-0">
                <div >
                    <img src="res/snacks/pepitos.webp" alt="pepitos img" class="w-[40vw]">
                    <p class="text-purple-400 text-center"><b>Pepitos</b><br>Price: 25 ₹ <br>IN STOCK: <span id="pepitostock"></span><br><button  onclick="stockminus('pepitostock','pepinum','Pepitos')"><i class="fa fa-minus-circle"></i></button><span class="text-emerald-400" id="pepinum"></span><button onclick="stockplus('pepitostock','pepinum','Pepitos')"><i class="fa fa-plus-circle"></i></button></p>
                </div>
            </div>
            <div class="flex flex-col flex-shrink-0">
            <div >
                    <img src="res/snacks/pringles.jpg" alt="pringles img" class="w-[40vw]">
                    <p class="text-purple-400 text-center"><b>Pringles</b><br>Price: 80 ₹ <br>IN STOCK: <span id="pringlestock"></span> <br><button  onclick="stockminus('pringlestock','pringnum','Pringles')"><i class="fa fa-minus-circle"></i></button><span class="text-emerald-400" id="pringnum"></span><button onclick="stockplus('pringlestock','pringnum','Pringles')"><i class="fa fa-plus-circle"></i></button></p>
            </div>
            </div>
            </div>
            <div class="mt-10">
                <p class="text-3xl ml-3 bg-gradient-to-r from-purple-500 via-pink-500 to-orange-600 text-transparent bg-clip-text hover:translate-x-2 transition ease-in-out">Find Quick-Food Here <i class="fa fa-arrow-down"></i></p> 
            </div>
            <div class="flex gap-x-4 w-[90vw] overflow-x-auto" id="quick-food">
            <div  class="flex flex-col flex-shrink-0">
            <div>
                    <img src="res/quickfood/chowmein.webp" alt="chowmein img" class="w-[40vw]">
                    <p class="text-purple-400 text-center"><b>Chowmein</b><br>Price: 89 ₹ <br>IN STOCK: <span id="chowmeinstock"></span><br><button  onclick="stockminus('chowmeinstock','chownum','Chowmein')"><i class="fa fa-minus-circle"></i></button><span class="text-emerald-400" id="chownum"></span><button onclick="stockplus('chowmeinstock','chownum','Chowmein')"><i class="fa fa-plus-circle"></i></button></p>
                </div>
            </div>
            <div class="flex flex-col flex-shrink-0">
                <div >
                    <img src="res/quickfood/maggi.webp" alt="Maggi img" class="w-[40vw]">
                    <p class="text-purple-400 text-center"><b>Maggie</b><br>Price: 10 ₹ <br>IN STOCK: <span id="maggistock"></span><br><button  onclick="stockminus('maggistock','magnum','Maggie')"><i class="fa fa-minus-circle"></i></button><span class="text-emerald-400" id="magnum"></span><button onclick="stockplus('maggistock','magnum','Maggie')"><i class="fa fa-plus-circle"></i></button></p>
                </div>
            </div>
            <div class="flex flex-col flex-shrink-0">
                <div >
                    <img src="res/quickfood/pizzaoats.png" alt="pizzaoats img" class="w-[40vw]">
                    <p class="text-purple-400 text-center"><b>Pizzaoats</b><br>Price: 50 ₹ <br>IN STOCK: <span id="pizzaoatstock"></span><br><button onclick="stockminus('pizzaoatstock','ponum','Pizzaoats')"><i class="fa fa-minus-circle"></i></button><span class="text-emerald-400" id="ponum"></span><button onclick="stockplus('pizzaoatstock','ponum','Pizzaoats')"><i class="fa fa-plus-circle"></i></button></p>
                </div>
            </div>
            <div class="flex flex-col flex-shrink-0">
            <div >
                    <img src="res/quickfood/topramen.jpeg" alt="Top Ramen img" class="w-[40vw]">
                    <p class="text-purple-400 text-center"><b>Top Ramen</b><br>Price: 20 ₹ <br>IN STOCK: <span id="topramenstock"></span><br><button onclick="stockminus('topramenstock','topnum','Top Ramen')"><i class="fa fa-minus-circle"></i></button><span class="text-emerald-400" id="topnum"></span><button onclick="stockplus('topramenstock','topnum','Top Ramen')"><i class="fa fa-plus-circle"></i></button></p>
            </div>
            </div>
            </div>
            <div class="mt-10">
                <p class="text-3xl ml-3 bg-gradient-to-r from-purple-500 via-pink-500 to-orange-600 text-transparent bg-clip-text hover:translate-x-2 transition ease-in-out">Find Drinks Here <i class="fa fa-arrow-down"></i></p> 
            </div>
            <div class="flex gap-x-4 w-[90vw] overflow-x-auto" id="drinks">
            <div  class="flex flex-col flex-shrink-0">
            <div>
                    <img src="res/Drinks/coke.jpg" alt="coke img" class="w-[40vw]">
                    <p class="text-purple-400 text-center"><b>Coca-Cola</b><br>Price: 40 ₹ <br>IN STOCK: <span id="cokestock"></span><br><button onclick="stockminus('cokestock','cokenum','Coca-Cola')"><i class="fa fa-minus-circle"></i></button><span class="text-emerald-400" id="cokenum"></span><button onclick="stockplus('cokestock','cokenum','Coca-Cola')"><i class="fa fa-plus-circle"></i></button></p>
                </div>
            </div>
            <div class="flex flex-col flex-shrink-0">
                <div >
                    <img src="res/Drinks/monster.jpg" alt="Monster img" class="w-[40vw]">
                    <p class="text-purple-400 text-center"><b>Monster</b><br>Price: 40 ₹ <br>IN STOCK: <span id="monsterstock"></span><br><button onclick="stockminus('monsterstock','monnum','Monster')"><i class="fa fa-minus-circle"></i></button><span class="text-emerald-400" id="monnum"></span><button onclick="stockplus('monsterstock','monnum','Monster')"><i class="fa fa-plus-circle"></i></button></p>
                </div>
            </div>
            <div class="flex flex-col flex-shrink-0">
                <div >
                    <img src="res/Drinks/outofstock.jpg" alt="Prime img" class="w-[40vw]">
                    <p class="text-purple-400 text-center"><b>Prime</b><br>Price: 300 ₹ <br>IN STOCK: <span id="primestock"></span><br><button onclick="stockminus('primestock','prmnum','Prime')"><i class="fa fa-minus-circle"></i></button><span class="text-emerald-400" id="prmnum"></span><button onclick="stockplus('primestock','prmnum','Prime')"><i class="fa fa-plus-circle"></i></button></p>
                </div>
            </div>
            <div class="flex flex-col flex-shrink-0">
            <div >
                    <img src="res/Drinks/pepsi.jpg" alt="Pepsi img" class="w-[40vw]">
                    <p class="text-purple-400 text-center"><b>Pepsi</b><br>Price: 40 ₹ <br>IN STOCK: <span id="pepsistock"></span><br><button onclick="stockminus('pepsistock','pepnum','Pepsi')"><i class="fa fa-minus-circle"></i></button><span class="text-emerald-400" id="pepnum"></span><button onclick="stockplus('pepsistock','pepnum','Pepsi')" ><i class="fa fa-plus-circle"></i></button></p>
            </div>
            </div>
            </div>
        </div>
    </div>
</body>
</html>

这是 script.js

import { addtocart } from "./cart";
addtocart(quantity, name, price, imgurl);

//for fun
var fun =0
//loading the html file first cus to get empty spans
document.addEventListener('DOMContentLoaded',()=>{
    //getting all span files as ids
    skits =  document.getElementById('skittelstock');
    mnms =       document.getElementById('mnmstock');
    pepis =   document.getElementById('pepitostock');
    prings = document.getElementById('pringlestock');
    chowms= document.getElementById('chowmeinstock');
    mags =     document.getElementById('maggistock');
    pizots= document.getElementById('pizzaoatstock');
    toprs = document.getElementById('topramenstock');
    cokes =     document.getElementById('cokestock');
    mons =   document.getElementById('monsterstock');
    primes =   document.getElementById('primestock');
    peps =     document.getElementById('pepsistock');
    //setting the stocks
    skits.textContent =  '30';
    mnms.textContent =   '20';
    pepis.textContent =  '30';
    prings.textContent = '20';
    chowms.textContent = '15';
    mags.textContent =   '20';
    pizots.textContent = '30';
    toprs.textContent =  '15';
    cokes.textContent =  '10';
    mons.textContent =   '10';
    primes.textContent =  '0';
    peps.textContent =   '15';
    //I hate KSI yeah
    primes.style.color = 'red';
});

//functions for stock management
function stockplus(stockid,spanid,name,price,imgurl){
    if(document.getElementById(stockid).textContent == 0){
        fun += 1;
        document.getElementById(stockid).style.color = 'red';
        alert('NO ITEM LEFT');
        if(fun >= 3)
        alert("seriously bro!?");//hehehe
        return;
    }
    //managing the stocks and quantitiy in cart
    document.getElementById(stockid).textContent -= 1;
    document.getElementById(spanid).textContent = Number(document.getElementById(spanid).textContent)+1;
    cart.addtocart(quantity,name,price,imgurl)
}
function stockminus(stockid,spanid,name,price,imgurl){
    if(document.getElementById(stockid).textContent == 0){
        return;
    }
    //manually setting the stock limits :(
    if((stockid == 'skittelstock' ||stockid == 'pepitostock'||stockid == 'pizzaoatstock')&&document.getElementById(stockid).textContent >= 30 
    ||(stockid == 'mnmstock' ||stockid == 'pringlestock'||stockid == 'maggistock')&&document.getElementById(stockid).textContent >= 20
    ||(stockid == 'chowmeinstock' ||stockid == 'topramenstock'||stockid == 'pepsistock')&&document.getElementById(stockid).textContent >= 15
    ||(stockid == 'cokestock' ||stockid == 'monsterstock')&&document.getElementById(stockid).textContent >= 10
    ){
    return;
    } 
    //managing the stocks and quantity in cart
    document.getElementById(stockid).textContent = Number(document.getElementById(stockid).textContent) +1;
    quantity = document.getElementById(spanid).textContent = Number(document.getElementById(spanid).textContent)-1;
    cart.addtocart(quantity,name,price,imgurl)
}

这是 cart.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"
    integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer" />
    <script src="cart.js"></script>
    <title>Cart</title>
</head>
<body class="bg-[#121212]">
    <div class="container">
        <div>
        <a href="./index.html"><button class="float-right z-10 mt-4 text-[3ch] text-orange-500 mr-4"><i class="fa fa-home"></i></button></a>
        </div>
        <div class="mt-16">
            <li id="cart">
            </li>
        </div>
    </div>
</body>
</html>

这是 cart.js 

export function addtocart(quantity,name,price,imgurl){
    const li = document.createElement('li');
    li.textContent = `${name} - ${quantity} x ₹${price} - ${imgurl}`;
    cart.appendChild(li);
}

我使用 onclick 从 html 文件调用 stockplus。我导入了 cart.js 并且 cart.js 有一个函数 addtocart() 。我也使用 tailwindcss 作为 CDN；

我目前正在尝试只让 Skittle 工作

我得到的错误是： index.html:34 Uncaught ReferenceError: stockplus 未定义 在 HTMLButtonElement.onclick (index.html:34:424)

应该调用该函数，并且 addtocart() 应该工作，没有错误

javascript html
1个回答
0
投票

正如@C3roe提到的，你得到的错误显然是因为你使用

<script type="module" ...
作为你的
script.js
。您这样做是因为在 
script.js
上，您从另一个脚本 (
addtoCart
) 导入了 
cart.js
函数。

script.js

import { addtocart } from "./cart";            // <-- THIS PART
addtocart(quantity, name, price, imgurl);

//for fun
var fun =0
//loading the html file first cus to get empty spans
document.addEventListener('DOMContentLoaded',()=>{

// ...

可以完成的一个快速修复方法是在 

addtoCart
中重新声明 
script.js
函数，这样您就不必导入它。

script.js

// import { addtocart } from "./cart";             // <-- NO LONGER NEEDED
function addtocart(quantity, name, price, imgurl) {
  const li = document.createElement('li');
  li.textContent = `${name} - ${quantity} x ₹${price} - ${imgurl}`;
  cart.appendChild(li);
}

addtocart(quantity, name, price, imgurl);

//for fun
var fun = 0
//loading the html file first cus to get empty spans
document.addEventListener('DOMContentLoaded', () => {
  //getting all span files as ids
  // ....

现在在您的 

index.html
上，您无需为您的 
type='module'
指定 
script.js
。

index.html

<script type="module" src="script.js"></script>  <!-- CHANGE THIS PART -->
<script src="script.js"></script>                <!-- TO BE LIKE THIS -->

我已经在本地计算机上对此进行了测试，它不会抛出您指定的错误，而是弹出警报： enter image description here

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.