如何使用事件监听器将标题和页脚文本改为文本框输入内容

先明确对应HTML结构（需与JS逻辑匹配） #

<!-- 标题输入框 -->
<input type="text" id="headerInput" placeholder="输入标题内容">
<!-- 页脚输入框 -->
<input type="text" id="footerInput" placeholder="输入页脚内容">
<!-- 页面标题元素 -->
<h1 id="pageHeader">默认标题</h1>
<!-- 页脚元素 -->
<footer id="pageFooter">默认页脚</footer>
<!-- 确认按钮 -->
<button id="done">确认修改</button>

修正后的JavaScript代码 #

// 获取页面核心元素
const pageHeader = document.getElementById('pageHeader');
const pageFooter = document.getElementById('pageFooter');
const headerInput = document.getElementById('headerInput');
const footerInput = document.getElementById('footerInput');
const doneBtn = document.getElementById('done');

// 更新标题内容
function updateHeader() {
    // 输入为空时保留原文本，否则用输入值
    const headerText = headerInput.value.trim() || pageHeader.textContent;
    pageHeader.textContent = headerText;
}

// 更新页脚内容
function updateFooter() {
    const footText = footerInput.value.trim() || pageFooter.textContent;
    pageFooter.textContent = footText;
}

// 点击确认按钮同步修改
function confirmChange() {
    updateHeader();
    updateFooter();
}

// 绑定输入事件：实时输入时自动修改
headerInput.addEventListener('input', updateHeader);
footerInput.addEventListener('input', updateFooter);
// 绑定确认按钮点击事件
doneBtn.addEventListener('click', confirmChange);

// 按回车触发确认（可选）
headerInput.addEventListener('keydown', (e) => {
    e.key === 'Enter' && confirmChange();
});
footerInput.addEventListener('keydown', (e) => {
    e.key === 'Enter' && confirmChange();
});

原代码的问题说明 #

• 未定义headerText、footText变量，需从输入框获取对应值
• DOM方法拼写错误：appendchild应为appendChild，addeventListener应为addEventListener
• 事件绑定逻辑混乱，未区分标题、页脚的输入源
• 元素操作语法错误：document.getElementById("done")element.click()应为document.getElementById("done").click()
• 未正确关联标题、页脚元素与对应输入框

内容的提问来源于stack exchange，提问作者user21566403