How do I use event listeners to change the title and footer text to a prompt entered into a text box

I’m trying to change the header and footer text from what its currently saying to whatever is entered into a text box. Code cannot be document.write()

The header uses h1, footer uses h2,

code for header text box is

input type=text id=headerText  /label  br 

code for footer text box is
input type=text id=footerText /label

my current script code is listed below

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

>Solution :

why are you using id as text input type=text id=headerText /label br as here you are using id as 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);
}