DOM值绑定事件处理器后为空问题：如何获取有效输入键值对

我设置了两个输入框，分别用于为userNameValue和userScoreValue变量赋值；在game对象中编写了addPlayers方法，用于将这两个DOM值存入allUsers数组的对象中。但点击提交按钮触发事件监听时，存入数组的键值对为空字符串，却能成功推入数组。请问如何实现用户输入姓名、分数并提交后，存入的键值对不为空？

用户提供的代码：

'use strict';


const userNameValue = document.querySelector('.name').value;
const userScoreValue = document.querySelector('.score').value;
const submit = document.querySelector('.submit');

const game = {
    allUsers: [],
    addPlayers(){
        this.allUsers.push({userNameValue, userScoreValue});
        console.log(this.allUsers);
    }
}

submit.addEventListener('click', game.addPlayers.bind(game));

问题原因 #

你现在的代码是在页面加载时就直接获取了输入框的value，这时候用户还没输入任何内容，所以userNameValue和userScoreValue一开始就被赋值为空字符串，后续点击按钮时，使用的还是这个初始的空值，自然存入数组的就是空内容。

解决方法 #

把获取输入框值的操作移到addPlayers方法内部，这样每次点击提交按钮时，才会实时获取当前输入框的内容，还可以增加非空判断避免无效提交：

'use strict';

const submit = document.querySelector('.submit');

const game = {
    allUsers: [],
    addPlayers(){
        // 每次点击时才获取当前输入框的最新值
        const userNameValue = document.querySelector('.name').value;
        const userScoreValue = document.querySelector('.score').value;
        
        // 过滤空内容和纯空格输入
        if(userNameValue.trim() && userScoreValue.trim()){
            this.allUsers.push({userNameValue, userScoreValue});
            console.log(this.allUsers);
        } else {
            console.log('姓名和分数不能为空，请输入有效内容');
        }
    }
}

submit.addEventListener('click', game.addPlayers.bind(game));

关键改动说明 #

• 将获取输入框value的逻辑从全局代码移到addPlayers方法内，确保每次点击按钮都能拿到用户最新输入的内容
• 增加trim()判断，避免用户输入空字符串或纯空格时也将无效数据存入数组

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