Как вызвать функцию и ее элементы из другого файла?
 

Добрый день всем! Забыл эти тонкости с функциями, когда функция в другом файле, а нужно ее элементы записать внутри другого элемента. Дает undefined

HTML

<main class="main">
  <div class="container"></div>
</main>
 <script type="module" src="./init.js"></script>

init файл

import { functeSt1 } from './cube.js';
import { functeSt2 } from './test.js'

const initMenu = document.querySelector(".header__menu");

initMenu.addEventListener("click", funcInitMenu);

function funcInitMenu(event) {
    const target = event.target;
    const container = document.querySelector(".container");

    if (target.id === "test1") {
        container.innerHTML = functeSt1();
        console.log("1");
    }
    if (target.id === "test2") {
        container.innerHTML = functeSt2();
        console.log("2");
    }
}

2 файл

function functeSt1() {

    const container = document.querySelector(".container");

    const test1 = `
        <button>TEST1</button>
    `;

    const test2 = `
        <button>TEST2</button>
    `;

    const test3 = `
        <button>TEST3</button>
    `;
    container.innerHTML = test1;
    container.innerHTML += test2;
    container.innerHTML += test3;

    // return functeSt1(); /* Error Maximum call stack size exceeded*/
    // return test1, test2, test3; /* Неудобно + загрузится только последний test3 */
}

export {functeSt1}

3 файл

function functeSt2() {
    const container = document.querySelector(".container");

    function html1() {
        const test2 = `
            <button>TEST2</button>
        `;
        container.innerHTML = test2;
    }

    function html2() {
        const test3 = `
            <button>TEST3</button>
        `;
        container.innerHTML += test3;
    }
}

export { functeSt2 }

Тут проблема вообще в понимании того что может делать функция... :(

Насколько я понял, твои функции должны просто вернуть строку с хтмл разметкой.
Потом весь этот текст можно будет вставить в любой элемент на странице...

b]ksa[/b],
Да 2 месяца так не делал с функциями и забыл:( . На счёт хтмл, да мне нужно просто перезаписовать элементы внутри container, в зависимости куда я кликаю из проверки if.

Alexander3928, вот пусть твои функции формируют текст с разметкой и этот текст возвращают...

ksa,
Я так и сделал. Просто элементы которые должны загрузится находятся в другом файле и если я буду вызывать функцию из другого файла, мне показывает undefined. И я не могу понять почему. Хотя если эту функцию создать в файле init.js, где я ее вызываю, тогда все будет окей, без undefined.

functeSt1 и functeSt2 должны возвращать строки
Но у Вас нет в них оператора return. Они ничего не возвращают. undefined.

voraa тебе показал что ты не сделал того, про что я тебе писал. :)
Если функции будут таки возвращать строки с разметкой - у тебя не будет undefined . ;)

ksa,
voraa,

Можно узнать что я не так сделал?

function functeSt2() {
    const container = document.querySelector(".container");

    function html1() {
        const test2 = `
            <button>TEST2</button>
        `;
        container.innerHTML = test2;
        return container;
    }

    function html2() {
        const test3 = `
            <button>TEST3</button>
        `;
        container.innerHTML += test3;
        return container;
    }
}

Тут больше вопрос к тебе... Что ты хотел таки сделать в той функции? :)

Alexander3928, вот тебе пример функции, которая возвращает строку с хтмл разметкой... ;)

<div id='test'></div>
<script>
const o = document.querySelector('#test')
o.insertAdjacentHTML('afterBegin', html())

// Пример функции с разметкой html
function html() {
	return '<p>Test</p>'
}
</script>