Как ограничить страницы и контент в них. Чтобы на других страницах не было видно
 

Добрый день всем. Возникла проблема которую не очень понимаю как решить. Есть 4 страницы сперва было на html, потом я перевел на JS динамически. Ивозникла проблема что контент из 1 странцы (home) виден и на других страницах, так как я указал в querySelector('main'). Я знаю видно везьде ведь этот main глобальный и я указал что он создает после body, но вот как мне тогда ограничить другие страницы я не знаю.

Вот где создает main для всех страниц

function main(root) {
    const globalMain = document.createElement('main');
    globalMain.classList.add('global-main'); 
    root.append(globalMain);
}

main(document.querySelector('body'));

Вот для примера 2 страницы с блоками опять же которые видны на всех страницах а должны только на одной своей странице

function contact(root) {
    const box = document.createElement('div');
    const box2 = document.createElement('div');
    box.classList.add('box-con');
    box2.classList.add('box-con__con');
    box.append(box2);
    root.append(box);
}

contact(document.querySelector('main'));

function services(root) {
    const box = document.createElement('div');
    const box2 = document.createElement('div');
    box.classList.add('box-ser');
    box2.classList.add('box-ser__ser');
    box.append(box2);
    root.append(box);
}

services(document.querySelector('main'));

P.S. Полность не могу кинуть слишком много места занимает. Но там все есть чтобы понять проблему.Заранее спасибо кто поможет

Так ты генери те страницы только когда нужны именно они...
Зачем делать их все сразу?

Вы меня не правильно поняли. У меня сайт из 4 разных страниц(home,server,contact, portfolio). В

header

я их добавил, ну типо как переходы между страниц. И вот проблема что каждая страница видит контент который на других страница. Ну если проще на странице home только изображения без единого текста, а на странице services только текст и все. Так вот, не важно какая из них смотрится я вижу как картинки, так и текст, хотя не должен. Может так я лучше описал ситуацию. И выше написал что не понимаю к чему привязываться ведь главный елемент main я добавил в body и он везде на любой странице, го мне нужно что в нем контент менялся зависимо от страниц

Удаляй его содержимое, потом вставляй в него нужное

Все я правильно понял... :)
Эти страницы разные пока в твоей голове, а по факту они все в куче.

Так это ж лишнее кодописание. Типо добовлять что при нажатии на кнопку (contact) будет удалятся все элементы не связаные с этой страницой. Мне кажется это убьет все и сайт будет грузится очень долго

Чему там грузиться то?
Во-первых какой смысл динамически генерировать статическое содержимое?
Ну если так уж хочется, то можно генерить 4 секции, соответствующие страницам. Сразу, или по мере перехода на эту секцию, и по необходимости переключать их, либо через display: none/block, либо отсоединять (не удаляя) и подключать к DOM.

Так, например, работает React. :D

Если я правильно понял, нужно событие клика добавить на ссылку которая на другую страницу перекидывает. И типо добавить

element.style.display = "none"

, а для нужной страницы(елементу страницы) добавить

element2.style.display = "block"

, но она мне кажется так не работает. Я писал в 4 разных js файлах и вроде как я не смогу обратится к элементам из других стран будет писать "is not defined"(это если я буду пытаться из 4 js файла попытаться его элементы объявить в других там 1,2,3 js файл )

Сделай уже тестовый пример...
На пальцах у тебя не особо получается.

Или переходи уже на Vue.JS или React.JS...

Надеюсь так будет понятней
 

В src есть папки
services-page - страница services со стилями и как для теста разноцветные блоки
portfolio-page - страница portfolio со стилями и как для теста разноцветные блоки
main-page - страница home со стилями и как для теста разноцветные блоки
contact-page - страница contact со стилями и как для теста разноцветные блоки
header-js - шапка
main-js - там где создается тег

main

после

body

index.js - импорт стилей и элементов

Ну так вот все это разноцветные блоки из services-page, portfolio-page, main-page, contact-page. Они ведны на всех страницах, а моя цель чтобы под каждой странице был свой разноцветный блок и не поаторялся на других страницах.Чтобы у каждой странице был только по 1 разноцветному блоку, а не по 4 как у меня

P.S. node_modulse не вышло добавить слишком большой.:help: :help: :help:

Ты на чем ваяешь все это?

Собираю webpack-ом, пишу без Reacta на js.
Запускаю 2 командами

npm run start
npm run dev

В конфиге вебпака есть

P.s на реакте не советуйте:no:

Ясно...

Спецу советовать - только портить. :D
Т.ч. все в твоих руках!

Как я понял вы не знаете как это исправить (( ?чтобы с бубной не танцевать

Я потерял интерес к твоей проблеме...
Тестовый пример ты не делаешь...
Хочешь лично делать х/з какой вариант в своем его понимании...

Если так не получится обьяснить, чтобы помогли тогда я не знаю
 

1 страница:

function main(root) {
    const box = document.createElement('div');
    const box2 = document.createElement('div');
    box.style.backgroundImage = "url('https://klike.net/uploads/posts/2019-06/1561182204_1.jpg')";
    box.classList.add('box-main');
    box2.classList.add('box-main__main');
    box.append(box2);
    root.append(box);
}

main(document.querySelector('main'));

стили для 1 страницы:

.box-main {
    width: 50%;
    height: 50vh;
    &__main {
        width: 350px;
        height: 200px;
        background-color: rgb(87, 104, 116);
    }
}

2 страница:

function services(root) {
    const box = document.createElement('div');
    const box2 = document.createElement('div');
    box.classList.add('box-ser');
    box2.classList.add('box-ser__ser');
    box.append(box2);
    root.append(box);
}

services(document.querySelector('main'));

стили для 2 страницы:

.box-ser {
    width: 50%;
    height: 50vh;
    background-color: rgb(217, 107, 245);
    &__ser {
        width: 350px;
        height: 200px;
        background-color: rgb(25, 135, 213);
    }
}

обложка тег main(тег типо как header и footer):

function main(root) {
    const globalMain = document.createElement('main');
    globalMain.classList.add('global-main'); 
    root.append(globalMain);
}

main(document.querySelector('body'));

скрип для подключения js кода(страниц):

import './header-js/header.js';
import './main-js/main.js';
import './main-page/main.js';
import './portfolio-page/portfolio.js';
import './services-page/services.js';
import './contact-page/contact.js';

скрип для подключение и js кода и scss стили:

import './contact-page/contact.scss';
import './main-js/main.scss';
import './script.js';

Разноцветные блоки это и есть контен, тоесть 1 разноцветный блок это 1 страница

P.S. Надеюсь теперь пример подойдет:help: :help: :help:

Не совсем понятно зачем ты сразу запихнул в браузер сразу все страницы... :-?
Обычно стараются генерить только нужные в определенный момент элементы.
Делают "точку входа".
Потом вставляют в нее хтмл нужной сейчас страницы.
По неким событиям убирают хтмл не нужной страницы и вставляют нужный.

Если же ты вставил таки все страницы разом - хотя бы прячь не нужные

display: none;

А потом включай нужную и прячь не нужную...
Но при таком подходе в ДОМ будут все твои страницы.

Если правильно понял что нужно добавить функцию на js которая будет удалять из страницы после клика ненужные страницы и добовлять при другом клике обратно эту страницу и удалять соседние. Я не уверен что это делается таким кодом.

Функция чтобы элементы удалять:

function clickPage(root) {
    main.addEventListener('click', () => {
        contact.remove();
        services.remove();
        portfolio.remove();
    });
}

clickPage(document.querySelector('main'));

P.S. Если знаете источники какие нибудь где прям с примерами и засжовыванием расказывают как ограничить страницы, поделить тогда пожалуйсто

Все делается разом. Не в несколько приемов. :)

Я тебе уже ранее писал про React.JS и Vue.JS - но тебя они не интересуют.

Почитай как делается т.н. "роутинг" страниц. Оба ПО имеют несколько вариантов его реализации.

Ех... Спасибо и за это