如何使用事件侦听器将标题和页脚文本更改为输入文本框的提示

Question

我正在尝试将页眉和页脚文本从当前所说的更改为输入到文本框中的任何内容。代码不能是 document.write()

页眉用h1，页脚用h2，

标题文本框的代码是

input type=text id=headerText  /label  br 

页脚文本框的代码是 输入类型=文本 id=footerText /label

下面列出了我当前的脚本代码

var headerchange = document.createTextNode(headerText);
h.appendchild(headerchange);



function header() {
    document.getElementById("Text").innerHTML = headerText;
}

document.addeventListener("input", footer);

function footer() {
        document.getElementById("Text").innerHTML = footText;
}


function enter() {
    document.getElementById("done")element.click();
}

Answer 1

你为什么使用 id 作为文本

input type=text id=headerText  /label  br

在这里你使用 id 作为 headerText

const headerTextBox = document.getElementById("headerText");
const footerTextBox = document.getElementById("footerText");

headerTextBox.addEventListener("input", updateHeader);
footerTextBox.addEventListener("input", updateFooter);

function updateHeader() {
  const headerText = headerTextBox.value;
  const newHeaderText = document.createTextNode(headerText);
  const headerElement = document.querySelector("h1");
  headerElement.innerHTML = "";
  headerElement.appendChild(newHeaderText);
}

function updateFooter() {
  const footerText = footerTextBox.value;
  const newFooterText = document.createTextNode(footerText);
  const footerElement = document.querySelector("h2");
  footerElement.innerHTML = "";
  footerElement.appendChild(newFooterText);
}