Как вызвать фукнцию Js в html

Рейтинг: 0Ответов: 1Опубликовано: 18.03.2023

у меня такая проблема, у меня есть Js функция, хочу ее вызвать в html, чтобы создать верхнюю панель, почему-то код не работает, вот код js:

let getElement = document.querySelector('header');

function header() {
  let mainHead = document.createElement('div');
  mainHead.className = 'mainHead';
  getElement.appendChild(mainHead);

  function createForm(active, text) {
    let form = document.createElement('form');
    form.setAttribute('active', active);

    mainHead.appendChild(form);

    let addButton = document.createElement('button');
    button.className = 'buttonInMainHead';

    form.appendChild(addButton);

    let add_h2 = document.createElement('h2');
    add_h2.className = 'textInButton';
    let h2text = document.createTextNode(text);
    add_h2.appendChild(h2text);

    button.appendChild(add_h2);
  }

  createForm('/Index.html', 'Главная');
  createForm('/pages/catalog.html', 'Каталог');
  createForm('/pages/info.html', 'Информация');
}

header();
<div class="header"></div>

скрипт собственно подключен конечно же. Или если я что-то делаю не так, можете подсказать в чем ошибка, и как это реализовывается на самом деле.

javascript html функции
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

let getElement = document.querySelector('.header'); //тут точку пропустил

function header() {
  debugger;
  let mainHead = document.createElement('div');
  mainHead.className = 'mainHead';
  getElement.appendChild(mainHead);

  function createForm(active, text) {
    let form = document.createElement('form');
    form.setAttribute('active', active);

    mainHead.appendChild(form);

    let addButton = document.createElement('button');
    addButton.className = 'buttonInMainHead'; //тут не button a  addButton

    form.appendChild(addButton);

    let add_h2 = document.createElement('h2');
    add_h2.className = 'textInButton';
    let h2text = document.createTextNode(text);
    add_h2.appendChild(h2text);

    addButton.appendChild(add_h2);//тут не button a  addButton
  }

  createForm('/Index.html', 'Главная');
  createForm('/pages/catalog.html', 'Каталог');
  createForm('/pages/info.html', 'Информация');
}

header();
<div class="header"></div>