猿问

如何通过点击按钮调用模块中描述的功能？

我正在努力创建比萨店网站。我决定将 id 创建为带有固定导航的 SPA。为了简化我的代码，我在模块中创建了它，但现在我遇到了一个大问题。我如何将模块函数链接到标题中的按钮，因为它会引发错误。在这里我发布了我的代码来演示该错误。为了修复它，我尝试移动部分代码并生成该错误。


<!DOCTYPE html>

<html>

    <head>

        <title>

            Mafia pizza

        </title>

       <link href="./css/styles.css" rel="stylesheet">

    </head>

    <body>

        <header>

        <button id="mainBtn" onclick="jump('')">

            Main

        </button>

        <button id="allBtn" onclick="jump('#all')">

            Catalogue

        </button>

        <button id="pizzaBtn" onclick="jump('#pizza')">

            Pizza

        </button>

        <button id="sushiBtn" onclick="jump('#sushi')">

            Sushi 

        </button>

        <button id="drinkBtn" onclick="jump('#drinks')">

            Drinks

        </button>

        

        <button id="cartBtn" style="float:right;" onclick="jump('#cart')">

            In the cart: <span id="amount">0</span>

        </button>


        </header>


        <!-- CLASS WITH CODE -->

        

        <div id="content" class="content" style="width: 100%; height: 100%;">


            

        </div>

        <!-- CLASS WITH CODE. AFTER WRITING TO MOVE TO A JS FILE -->


        <script type="module">

            import { routes } from './js/getpage.js';

            import { generatePromo,generateItems } from './js/functions.js';


            async function router(){

                let link = window.location.href;

                let buttonList = document.querySelectorAll('header button');

                for(let i=0;i<buttonList.length;i++){

                    buttonList[i].style.backgroundColor = 'darkorange';

                }



慕后森
浏览 114回答 2
2回答

慕运维8079593

由于您的脚本位于 html 之后，因此jump在渲染 html 时不会定义您的函数。您可以向所有这些元素添加一个事件处理程序以及一个包含路径的数据属性。jump然后像这样修改你的功能<!DOCTYPE html><html>&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; &nbsp; <title>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Mafia pizza&nbsp; &nbsp; &nbsp; &nbsp; </title>&nbsp; &nbsp; &nbsp; &nbsp;<link href="./css/styles.css" rel="stylesheet">&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; <header>&nbsp; &nbsp; &nbsp; &nbsp; <button id="mainBtn" class="nav" data-path="">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Main&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; <button id="allBtn" class="nav" data-path="#all">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Catalogue&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; <button id="pizzaBtn" class="nav" data-path="#pizza">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Pizza&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; <button id="sushiBtn" class="nav" data-path="#sushi">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Sushi&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; <button id="drinkBtn" class="nav" data-path="#drinks">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Drinks&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <button id="cartBtn" style="float:right;" onclick="jump('#cart')">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; In the cart: <span id="amount">0</span>&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; </header>&nbsp; &nbsp; &nbsp; &nbsp; <!-- CLASS WITH CODE -->&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <div id="content" class="content" style="width: 100%; height: 100%;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <!-- CLASS WITH CODE. AFTER WRITING TO MOVE TO A JS FILE -->&nbsp; &nbsp; &nbsp; &nbsp; <script type="module">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; import { routes } from './js/getpage.js';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; import { generatePromo,generateItems } from './js/functions.js';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // query all elements with `nav` class.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // add event listener to each element.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; docuemnt.querySelectorAll('.nav').forEach(el => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el.addEventListener('click', jump)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; async function router(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let link = window.location.href;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let buttonList = document.querySelectorAll('header button');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(let i=0;i<buttonList.length;i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; buttonList[i].style.backgroundColor = 'darkorange';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(link.indexOf('#')==-1)link = 'main';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; link = link.substring(link.indexOf('#'));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(link);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; switch(link){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'sushi':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('sushiBtn').style.backgroundColor = '#F9E79F';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('content').innerHTML = routes['sushi'];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('goodsField').innerHTML = await generateItems('sushi');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'pizza':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('pizzaBtn').style.backgroundColor = '#F9E79F';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('content').innerHTML = routes['pizza'];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('goodsField').innerHTML = await generateItems('pizza');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'drinks':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('drinkBtn').style.backgroundColor = '#F9E79F';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('content').innerHTML = routes['drinks'];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('goodsField').innerHTML = await generateItems('drinks');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'cart':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('cartBtn').style.backgroundColor = '#F9E79F';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('content').innerHTML = routes['cart'];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'all':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('allBtn').style.backgroundColor = '#F9E79F';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('content').innerHTML = routes['all'];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('mainBtn').style.backgroundColor = '#F9E79F';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('content').innerHTML = routes['main'];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let ls = await generateItems('recommended');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('goodsField').innerHTML = ls;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; generatePromo();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("prevbutton").style.display = 'inline';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("nextbutton").style.display = 'inline';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function jump(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const path = this.getAttribute('data-path')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.location.href = "https://valerydrozd.github.io/"+path;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; router();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.onload = router();&nbsp; &nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; &nbsp; &nbsp; <script type="text/javascript" src='./js/slider.js'></script>&nbsp; &nbsp; &nbsp; &nbsp; <script type="text/javascript" src='./js/buy.js'></script>&nbsp; &nbsp; &nbsp; &nbsp; <footer class="foot">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </footer>&nbsp; &nbsp; </body></html>
0

叮当猫咪

模块有自己的范围。您必须在同一范围内定义事件回调。例子：<a href="#" id="test">Click me for an alert</a><br><br><a href="#" onclick="testFunction()">But this one will give an error because it is defined in a different context</a><script type="module">function testFunction(){&nbsp; &nbsp; alert("test");}document.getElementById("test").onclick = testFunction;</script>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答