如何通过点击按钮调用模块中描述的函数

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

<!DOCTYPE html>
<html lang="en">
<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';
}
if(link.indexOf('#')==-1)link = 'main';
else
link = link.substring(link.indexOf('#'));
console.log(link);
switch(link){
case 'sushi':
document.getElementById('sushiBtn').style.backgroundColor = '#F9E79F';
document.getElementById('content').innerHTML = routes['sushi'];
document.getElementById('goodsField').innerHTML = await generateItems('sushi');
break;
case 'pizza':
document.getElementById('pizzaBtn').style.backgroundColor = '#F9E79F';
document.getElementById('content').innerHTML = routes['pizza'];
document.getElementById('goodsField').innerHTML = await generateItems('pizza');
break;
case 'drinks':
document.getElementById('drinkBtn').style.backgroundColor = '#F9E79F';
document.getElementById('content').innerHTML = routes['drinks'];
document.getElementById('goodsField').innerHTML = await generateItems('drinks');
break;
case 'cart':
document.getElementById('cartBtn').style.backgroundColor = '#F9E79F';
document.getElementById('content').innerHTML = routes['cart'];
break;
case 'all':
document.getElementById('allBtn').style.backgroundColor = '#F9E79F';
document.getElementById('content').innerHTML = routes['all'];
break;
default:
document.getElementById('mainBtn').style.backgroundColor = '#F9E79F';
document.getElementById('content').innerHTML = routes['main'];
let ls = await generateItems('recommended');
document.getElementById('goodsField').innerHTML = ls;
generatePromo();
document.getElementById("prevbutton").style.display = 'inline';
document.getElementById("nextbutton").style.display = 'inline';
break;
}
}
function jump(path){
window.location.href = "https://valerydrozd.github.io/"+path;
router();
}
window.onload = router();
</script>
<script type="text/javascript" src='./js/slider.js'></script>
<script type="text/javascript" src='./js/buy.js'></script>
<footer class="foot">

</footer>
</body>
</html>

由于脚本位于html之后，因此在渲染html时不会定义jump函数。

您可以向所有这些元素添加一个事件处理程序，并添加一个包含路径的数据属性。然后像一样修改jump功能

<!DOCTYPE html>
<html lang="en">
<head>
<title>
Mafia pizza
</title>
<link href="./css/styles.css" rel="stylesheet">
</head>
<body>
<header>
<button id="mainBtn" class="nav" data-path=""> 
Main
</button>
<button id="allBtn" class="nav" data-path="#all">
Catalogue
</button>
<button id="pizzaBtn" class="nav" data-path="#pizza">
Pizza
</button>
<button id="sushiBtn" class="nav" data-path="#sushi">
Sushi 
</button>
<button id="drinkBtn" class="nav" data-path="#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';
// query all elements with `nav` class.
// add event listener to each element.
docuemnt.querySelectorAll('.nav').forEach(el => {
el.addEventListener('click', jump)
})
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';
}
if(link.indexOf('#')==-1)link = 'main';
else
link = link.substring(link.indexOf('#'));
console.log(link);
switch(link){
case 'sushi':
document.getElementById('sushiBtn').style.backgroundColor = '#F9E79F';
document.getElementById('content').innerHTML = routes['sushi'];
document.getElementById('goodsField').innerHTML = await generateItems('sushi');
break;
case 'pizza':
document.getElementById('pizzaBtn').style.backgroundColor = '#F9E79F';
document.getElementById('content').innerHTML = routes['pizza'];
document.getElementById('goodsField').innerHTML = await generateItems('pizza');
break;
case 'drinks':
document.getElementById('drinkBtn').style.backgroundColor = '#F9E79F';
document.getElementById('content').innerHTML = routes['drinks'];
document.getElementById('goodsField').innerHTML = await generateItems('drinks');
break;
case 'cart':
document.getElementById('cartBtn').style.backgroundColor = '#F9E79F';
document.getElementById('content').innerHTML = routes['cart'];
break;
case 'all':
document.getElementById('allBtn').style.backgroundColor = '#F9E79F';
document.getElementById('content').innerHTML = routes['all'];
break;
default:
document.getElementById('mainBtn').style.backgroundColor = '#F9E79F';
document.getElementById('content').innerHTML = routes['main'];
let ls = await generateItems('recommended');
document.getElementById('goodsField').innerHTML = ls;
generatePromo();
document.getElementById("prevbutton").style.display = 'inline';
document.getElementById("nextbutton").style.display = 'inline';
break;
}
}
function jump(){
const path = this.getAttribute('data-path')
window.location.href = "https://valerydrozd.github.io/"+path;
router();
}
window.onload = router();
</script>
<script type="text/javascript" src='./js/slider.js'></script>
<script type="text/javascript" src='./js/buy.js'></script>
<footer class="foot">

</footer>
</body>
</html>

模块有自己的作用域。您必须在同一范围内定义事件回调。

示例：

<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()
{
alert("test");
}
document.getElementById("test").onclick = testFunction;
</script>

相关内容

最新更新

热门标签：