I’m working on creating pizzeria site. I decided to create id as SPA with fixed navigation. To simplificy my code I created it in modules and now I have a big problem with them. How I can link module function to button in headers, because it throws an error. Here I posted my code to demonstate the error. To fix it I tried to move parts of the code and generate that error.
JavaScript
x
104
104
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<title>5
Mafia pizza6
</title>7
<link href="./css/styles.css" rel="stylesheet">8
</head>9
<body>10
<header>11
<button id="mainBtn" onclick="jump('')">12
Main13
</button>14
<button id="allBtn" onclick="jump('#all')">15
Catalogue16
</button>17
<button id="pizzaBtn" onclick="jump('#pizza')">18
Pizza19
</button>20
<button id="sushiBtn" onclick="jump('#sushi')">21
Sushi 22
</button>23
<button id="drinkBtn" onclick="jump('#drinks')">24
Drinks25
</button>26
27
<button id="cartBtn" style="float:right;" onclick="jump('#cart')">28
In the cart: <span id="amount">0</span>29
</button>30
31
</header>32
33
<!-- CLASS WITH CODE -->34
35
<div id="content" class="content" style="width: 100%; height: 100%;">36
37
38
</div>39
<!-- CLASS WITH CODE. AFTER WRITING TO MOVE TO A JS FILE -->40
41
<script type="module">42
import { routes } from './js/getpage.js';43
import { generatePromo,generateItems } from './js/functions.js';44
45
async function router(){46
let link = window.location.href;47
let buttonList = document.querySelectorAll('header button');48
for(let i=0;i<buttonList.length;i++){49
buttonList[i].style.backgroundColor = 'darkorange';50
}51
52
if(link.indexOf('#')==-1)link = 'main';53
else54
link = link.substring(link.indexOf('#'));55
console.log(link);56
switch(link){57
case 'sushi':58
document.getElementById('sushiBtn').style.backgroundColor = '#F9E79F';59
document.getElementById('content').innerHTML = routes['sushi'];60
document.getElementById('goodsField').innerHTML = await generateItems('sushi');61
break;62
case 'pizza':63
document.getElementById('pizzaBtn').style.backgroundColor = '#F9E79F';64
document.getElementById('content').innerHTML = routes['pizza'];65
document.getElementById('goodsField').innerHTML = await generateItems('pizza');66
break;67
case 'drinks':68
document.getElementById('drinkBtn').style.backgroundColor = '#F9E79F';69
document.getElementById('content').innerHTML = routes['drinks'];70
document.getElementById('goodsField').innerHTML = await generateItems('drinks');71
break;72
case 'cart':73
document.getElementById('cartBtn').style.backgroundColor = '#F9E79F';74
document.getElementById('content').innerHTML = routes['cart'];75
break;76
case 'all':77
document.getElementById('allBtn').style.backgroundColor = '#F9E79F';78
document.getElementById('content').innerHTML = routes['all'];79
break;80
default:81
document.getElementById('mainBtn').style.backgroundColor = '#F9E79F';82
document.getElementById('content').innerHTML = routes['main'];83
let ls = await generateItems('recommended');84
document.getElementById('goodsField').innerHTML = ls;85
generatePromo();86
document.getElementById("prevbutton").style.display = 'inline';87
document.getElementById("nextbutton").style.display = 'inline';88
break;89
}90
}91
92
function jump(path){93
window.location.href = "https://valerydrozd.github.io/"+path;94
router();95
}96
window.onload = router();97
</script>98
<script type="text/javascript" src='./js/slider.js'></script>99
<script type="text/javascript" src='./js/buy.js'></script>100
<footer class="foot">101
102
</footer>103
</body>104
</html>Advertisement
Answer
Since your script comes after the html, your jump function wont be defined when the html is rendered.
You could add an event handler to all those elements and a data attribute that contains the path. Then modify you jump function like so
JavaScript
1
109
109
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<title>5
Mafia pizza6
</title>7
<link href="./css/styles.css" rel="stylesheet">8
</head>9
<body>10
<header>11
<button id="mainBtn" class="nav" data-path=""> 12
Main13
</button>14
<button id="allBtn" class="nav" data-path="#all">15
Catalogue16
</button>17
<button id="pizzaBtn" class="nav" data-path="#pizza">18
Pizza19
</button>20
<button id="sushiBtn" class="nav" data-path="#sushi">21
Sushi 22
</button>23
<button id="drinkBtn" class="nav" data-path="#drinks">24
Drinks25
</button>26
27
<button id="cartBtn" style="float:right;" onclick="jump('#cart')">28
In the cart: <span id="amount">0</span>29
</button>30
31
</header>32
33
<!-- CLASS WITH CODE -->34
35
<div id="content" class="content" style="width: 100%; height: 100%;">36
37
38
</div>39
<!-- CLASS WITH CODE. AFTER WRITING TO MOVE TO A JS FILE -->40
41
<script type="module">42
import { routes } from './js/getpage.js';43
import { generatePromo,generateItems } from './js/functions.js';44
// query all elements with `nav` class.45
// add event listener to each element.46
docuemnt.querySelectorAll('.nav').forEach(el => {47
el.addEventListener('click', jump)48
})49
async function router(){50
let link = window.location.href;51
let buttonList = document.querySelectorAll('header button');52
for(let i=0;i<buttonList.length;i++){53
buttonList[i].style.backgroundColor = 'darkorange';54
}55
56
if(link.indexOf('#')==-1)link = 'main';57
else58
link = link.substring(link.indexOf('#'));59
console.log(link);60
switch(link){61
case 'sushi':62
document.getElementById('sushiBtn').style.backgroundColor = '#F9E79F';63
document.getElementById('content').innerHTML = routes['sushi'];64
document.getElementById('goodsField').innerHTML = await generateItems('sushi');65
break;66
case 'pizza':67
document.getElementById('pizzaBtn').style.backgroundColor = '#F9E79F';68
document.getElementById('content').innerHTML = routes['pizza'];69
document.getElementById('goodsField').innerHTML = await generateItems('pizza');70
break;71
case 'drinks':72
document.getElementById('drinkBtn').style.backgroundColor = '#F9E79F';73
document.getElementById('content').innerHTML = routes['drinks'];74
document.getElementById('goodsField').innerHTML = await generateItems('drinks');75
break;76
case 'cart':77
document.getElementById('cartBtn').style.backgroundColor = '#F9E79F';78
document.getElementById('content').innerHTML = routes['cart'];79
break;80
case 'all':81
document.getElementById('allBtn').style.backgroundColor = '#F9E79F';82
document.getElementById('content').innerHTML = routes['all'];83
break;84
default:85
document.getElementById('mainBtn').style.backgroundColor = '#F9E79F';86
document.getElementById('content').innerHTML = routes['main'];87
let ls = await generateItems('recommended');88
document.getElementById('goodsField').innerHTML = ls;89
generatePromo();90
document.getElementById("prevbutton").style.display = 'inline';91
document.getElementById("nextbutton").style.display = 'inline';92
break;93
}94
}95
96
function jump(){97
const path = this.getAttribute('data-path')98
window.location.href = "https://valerydrozd.github.io/"+path;99
router();100
}101
window.onload = router();102
</script>103
<script type="text/javascript" src='./js/slider.js'></script>104
<script type="text/javascript" src='./js/buy.js'></script>105
<footer class="foot">106
107
</footer>108
</body>109
</html>