Как объявить функцию в другой функции
 

Есть событие клика для всех кнопок:

<div id="buttons"> 
  <button class="buttonClass">Click me</button>
  <button class="buttonClass">Click me</button>
  <button class="buttonClass">Click me</button>
</div>

<script>
function buttList(root) {
  document.getElementById('buttons')
    .addEventListener('click', event => { 
      if (event.target.className === 'buttonClass') { 
        console.log('Click!');
      }
    });
}
</script>

И есть функция test. В ней какой нибудь контент и я хочу объявить функцию buttList в ней, если к примеру эта функция buttList в другом файле. Как мне указать чтобы эта функция работала внутри функции test и не выдавала ошибку, что функция пустая. Как нужно записывать, объявлять функцию внутри другой функции?:help:

function test(root) {
 const box = document.CreateElement("div");
 box.classList.add("box");
 const box2 = document.CreateElement("div");
 box2.classList.add("box2");
 const box3 = document.CreateElement("div");
 box3.classList.add("box3");

 buttList ();
}

Alexander3928,
https://learn.javascript.ru/modules

Объявить или вызвать?
В примере вы вызываете эту функцию
Что за ошибка такая?
А функция test где находится?

Да вызвать, привык просто так. Test не важно где находится, это просто пример. Важно как внутри неё вызвать другую функцию чтобы она работала

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

И объявление функции должно быть обработано до ее вызова

HTML

<div id="buttons">
        <button class="buttonClass">Click me</button>
        <button class="buttonClass">Click me</button>
        <button class="buttonClass">Click me</button>
    </div>

В index.js файл script.js

import './script.js';

P.S. я собираю вебпаком поэтому index.js финальный файл и в нем script.js, а в script.js все другие файла javascript

В файле script.js находится test.js

import './test.js';

В файле test,js я хочу вызвать функцию buttList.js

import {buttList} from "./buttList.js";

function test(root) {

    buttList();
    
}

А в файле buttList.js у меня записанно событие клика

function buttList(root) {

    document.getElementById("buttons").addEventListener("click", (event) => {
        if(event.target.className === "buttonClass") {
            console.log("Click")
        }
    });
    
export {buttList}
}

Да я тупонул ошибки не будет, но если я кликаю на кнопки мне в консоль не выводит "Click".

А функция test где вызывается?

Значит подключение и использование правильное...

Возможно, на момент работы скрипта, тех элементов просто нет на странице...

В файле test.js а сам test.js в файле script.js. Я весь путь для этих файлов вверху написал

Они если на странице.

В файле test.js функция только определяется (объявляется), но не вызывается.

Что бы сработал код
document.getElementById("buttons").addEventListene r("click",...
функция buttList должна быть вызвана. Она вызывается в функции test (стр 5)
Но что бы эта строка сработала, должна быть где то вызвана сама функция test.

В файле test.js а сам test.js в файле script.js. Я весь путь для этих файлов вверху написал

Где ВЫЗОВ функции test ???
Вы разницу между объявлением (заданием, определением) функции и ее вызовом понимаете?

Ага, понял теперь в чем проблема. Спасибо

Для демонстрации проблемы нужно делать полные, но маленькие, тестовые примеры. ;)

В противном случае переписываться можно еще дольше. :)

Она и есть полная, я просто их по разным файлах закинул

Полная - это когда у себя все повторил и увидел.
В твоем же случае ничего "собрать" не получится. :no: