主页 / 问题 / 1505971
Accepted
iewher
Asked:2023-03-18 11:01:07 +0800 CST2023-03-18 11:01:07 +0800 CST

如何在html中调用js函数

  • 772

我有这样的问题，我有一个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

1 个回答

  1. Best Answer

    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>

    • 2

相关问题