求助：JavaScript获取input值并显示功能异常，求排查代码问题

错误点说明 #

• 提前获取输入框值，无法实时更新
  你在页面初始化时就获取了输入框newtext的value并赋值给getVal，此时输入框是空值，后续用户输入的内容不会同步到getVal——因为const变量赋值后不会自动更新，必须在触发点击事件时去获取当前的输入值。

• return语句提前终止函数
  displayNewText函数里，return语句写在console.log前面，执行到return时函数直接结束，导致后面的日志代码永远不会执行，需要调整return的位置或者直接移除（这里不需要return，因为函数是处理DOM更新，不需要返回值）。

修正后的代码 #

const getBtn = document.getElementById('btn');

getBtn.addEventListener('click', displayNewText);

function displayNewText() {
    // 在点击时才获取当前输入框的值
    const getVal = document.getElementById('newtext').value;
    document.getElementById('displaytext').innerHTML = getVal;
    console.log(getVal);
}

HTML部分保持不变即可，你用defer属性确保DOM加载完成后执行JS的做法是正确的。

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