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

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

<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. Я весь путь для этих файлов вверху написал

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