[Alexander3928]

Добрый день всем! Забыл эти тонкости с функциями, когда функция в другом файле, а нужно ее элементы записать внутри другого элемента. Дает 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 }