无法获取input输入框的值，寻求JavaScript解决办法

你的代码问题在于提前获取了输入框的值：页面加载时就把inputElem.value赋值给了inputValue，这时候输入框是空的，之后不管你在输入框里输入什么，inputValue都会一直是初始的空值，点击按钮自然输出不了最新内容。

修复方案一：点击时实时获取值 #

把获取输入框值的代码移到点击事件内部，每次点击按钮时才读取当前输入框的内容：

let inputElem = document.getElementById('username');
let button = document.getElementById('input-btn');

button.addEventListener('click', function () {
    let inputValue = inputElem.value;
    console.log(inputValue);
});

修复方案二：直接在事件中读取值 #

如果不需要额外变量，也可以直接在事件里打印输入框的当前值：

let inputElem = document.getElementById('username');
let button = document.getElementById('input-btn');

button.addEventListener('click', function () {
    console.log(inputElem.value);
});

额外注意事项 #

如果你的JS代码是放在HTML的<head>标签里，可能会出现找不到元素的情况，这时候需要确保DOM加载完成后再执行代码。可以把JS代码放在</body>标签的前面，或者用DOMContentLoaded事件包裹：

document.addEventListener('DOMContentLoaded', function() {
    let inputElem = document.getElementById('username');
    let button = document.getElementById('input-btn');

    button.addEventListener('click', function () {
        console.log(inputElem.value);
    });
});

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