表单输入框取值后无法在alert()中显示的问题求助

嘿，我一眼就看出问题所在啦！你现在的代码犯了一个很常见的小错误：

你是在页面刚加载完成的时候就获取了firstName、lastName这些变量的值，这时候用户还没来得及在输入框里输入任何内容，所以这些变量从一开始就是空字符串。等用户点击按钮触发showAlert函数时，你用的还是最开始初始化的空值，自然alert弹出来啥都没有~

修正方案 #

把获取输入框值的代码移到点击事件的函数内部，这样每次用户点击按钮时，都会重新读取输入框当前的内容，而不是用页面加载时的旧值：

$("#validationAlert").hide();
$("#btn-sign-up").click(function showAlert() {
    // 每次点击时重新获取输入框的最新值
    var firstName = document.getElementById('firstName').value;
    var lastName = document.getElementById('lastName').value;
    var email = document.getElementById('email').value;
    
    if (firstName == "") {
        $("#firstName").focus();
        alert(firstName); // 现在如果为空会弹出空，建议改成提示文字比如"请输入您的名字"
    }
});

额外小建议 #

• 既然你已经在用jQuery了，可以统一用jQuery的方式获取值，写法更简洁：var firstName = $('#firstName').val();
• 空值判断可以简化成if (!firstName)，因为空字符串在布尔判断中会被视为false
• 别alert空内容啦，换成友好的提示语，比如alert("请输入您的名字！")，用户能更清楚知道哪里出了问题

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