如何通过JavaScript点击按钮时将第一个文本框的值赋值给第二个

你的代码存在几个关键问题，直接修改即可实现需求：

修正后的JavaScript代码 #

// 提前获取DOM元素，避免重复查找
const txt1 = document.getElementById('txt-1');
const btn1 = document.getElementById('btn1');
const out1 = document.getElementById('output1');

function displayText() {
    // input表单控件通过value属性设置内容，而非innerHTML
    out1.value = txt1.value;
}

// 仅绑定一次点击事件，不要放在displayText函数内部
btn1.addEventListener('click', displayText);

问题说明 #

1. 重复绑定事件：原代码把addEventListener写在displayText函数里，还在页面加载时直接调用displayText()，会导致每次点击按钮都新增一个监听事件，后续点击会重复执行多次赋值逻辑
2. input内容设置错误：<input>是表单控件，它的输入/显示内容由value属性管理，innerHTML用于设置元素的内部HTML结构，不适用于这类控件
3. 多余的初始化执行：页面加载时就执行displayText()会把空值写入输出框，完全没必要

可选HTML优化 #

原label的for属性值与输入框id不匹配，点击label无法聚焦到输入框，建议修正：

<label for="txt-1">Username:</label>
<input type="text" id="txt-1" placeholder="Text Box-1">
<input type="text" id="output1" placeholder="Text Box-2">
<input type="button" id="btn1" value="Click Me">

内容的提问来源于stack exchange，提问作者M.S