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

[Alexander3928]

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

<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 и не выдавала ошибку, что функция пустая. Как нужно записывать, объявлять функцию внутри другой функции?

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

[voraa]

и я хочу объявить функцию buttList в ней

Объявить или вызвать?
В примере вы вызываете эту функцию

и не выдавала ошибку, что функция пустая

Что за ошибка такая?
А функция test где находится?

[Alexander3928]

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

[voraa]

Test не важно где находится

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

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

[Alexander3928]

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".

[voraa]

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

[ksa]

ошибки не будет

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

но если я кликаю на кнопки мне в консоль не выводит "Click"

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

[Alexander3928]

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

[Alexander3928]

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

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