Привет всем! Сразу к тебе решил повторить маршрутизацию для сайта которую я делал раньше. Оно на другом проекте работает ну и я решил попробывать опять его сделать на другом макете проекта. Повторил все как было на другом макете и в итоге получил ошибки
Cannot set property 'innerHTML' of null
at all_pain_fun. Может быть кто-то знает в чем ошибка? Из-за нее я даже не вижу страницы которые должны за счет маршрутизации грузится, типо изначальной страницой должно быть с функцией
[page_1 тоесть первая ну и за счет маршрутизации передвигатся по 3 функциям
page 1, page 2 и page_3
<!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">
<link rel="stylesheet" href="./dist/styles.css">
<title>Route</title>
</head>
<body>
<!-- <script src="./dist/bundle.js"></script> -->
<script type="module" src="./src/header/header.js"></script>
<script type="module" src="./src/page_1/page_1.js"></script>
<script type="module" src="./src/page_2/page_2.js"></script>
<script type="module" src="./src/page_3/page_3.js"></script>
<script type="module" src="./src/route/route.js"></script>
<script type="module" src="./src/main/main.js"></script>
</body>
</html>
route
import {page_1 as index} from '../page_1/page_1.js';
import {page_2} from '../page_2/page_2.js';
import {page_3} from '../page_3/page_3.js';
const m = document.querySelector('main')
const all_pain = {
index,
page_2,
page_3,
}
let history_ = location.search.slice(1)
const all_pain_fun = (first,pathname = location.search.slice(1)) => {
if(first && history_ === pathname) return
pathname.length > 10 && (pathname = 'index')
!pathname && (pathname = 'index')
m.innerHTML = '';
all_pain[pathname](m)
history.pushState('', {}, '?'+pathname)
history_ = location.search.slice(1)
}
all_pain_fun(false)
document.querySelector('.header__menu').addEventListener('click', e=>{
if(e.target.tagName !== 'A')return
all_pain_fun(true, e.target.title)
})
script с подключением все js файлы
import "./header/header.js"
import "./page_1/page_1.js"
import "./page_2/page_2.js"
import "./page_3/page_3.js"
import "./main/main.js"
тег main типо главная оболочка
function main(root) {
const globalMain = document.createElement('main');
globalMain.classList.add('global-main');
root.append(globalMain);
}
main(document.querySelector('body'));
страница 1 (код у всех страниц одинаковый кроме названий)
function page_1(root) {
const main_1 = document.createElement("div")
main_1.classList.add("page_2")
root.append(main_1)
}
export { page_1 }
header
const item_menu = [
["index", "Page_1"],
["page_2", "Page_2"],
["page_3", "Page_3"],
]
function header(root) {
const header = document.createElement("header")
header.classList.add("header")
const header__wrapper = document.createElement("div")
header__wrapper.classList.add("header__wrapper")
const header__content = document.createElement("div")
header__content.classList.add("header__content")
const header__menu = document.createElement("ul")
header__menu.classList.add("header__menu")
let srt = "";
for(let e of item_menu) {
srt += `
<li class="header__item">
<a class="header__link" title="${e[0]}">${e[1]}</a>
</li>
`;
}
header__menu.innerHTML += srt;
header__content.append(header__menu)
header__wrapper.append(header__content)
header.append(header__wrapper)
root.append(header)
}
header(document.querySelector('body'));
index
import "./script.js"
import "./header/header.scss"
import "./page_1/page_1.scss"
import "./page_2/page_2.scss"
import "./page_3/page_3.scss"
P.S надеюсь тему обьяснил
