导航不适用于多页网站

在javascript中实现了一个函数，看起来像这样

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'; 

    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);
  }

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

header();

问题是当您单击按钮时，不会发生转换。我把旧的html重写成js，旧的代码是这样的：

<div class="mainHead">
        <form action="/Index.html">
            <button class="buttonInMainHead">
                <h2 class="textInButton">Главная</h2>
            </button>
        </form>
        <form action="/pages/catalog.html">
            <button class="buttonInMainHead">
                <h2 class="textInButton">Каталог</h2>
            </button>
        </form>
        <form action="/pages/info.html">
            <button class="buttonInMainHead">
                <h2 class="textInButton">Информация</h2>
            </button>
        </form>
    </div>

同时，一切正常，我认为问题出在我在创建它时在js表单中设置的属性，如果我错了请纠正我。