如何通过点击事件触发函数实现输入数字对应的偶数列表打印

关键修改点： #

• 阻止表单默认提交行为，避免页面刷新
• 每次点击提交时重置数组，防止重复添加数据
• 将用户输入转换为整数，避免字符串与数字的比较问题
• 处理无效输入的情况
• 将数组元素拼接为字符串并输出到目标元素中

完整JavaScript代码： #

// 初始化空数组
let arrayEvenNum = [];

// 生成偶数数组的函数
function loopInput(){
    let userInput = parseInt(document.querySelector(".input").value);
    
    // 检查输入是否为有效数字
    if (isNaN(userInput)) {
        arrayEvenNum = ["请输入有效的数字"];
        return;
    }
    
    for (let i = 0; i <= userInput; i+=2) {
       arrayEvenNum.push(i);
    }
}

let submit = document.querySelector(".submit");

submit.addEventListener("click",(event) => {
    // 阻止表单默认提交行为
    event.preventDefault();
    // 重置数组
    arrayEvenNum = [];
    // 生成偶数数组
    loopInput();
    // 获取结果展示元素
    const outcomeElement = document.querySelector('.outcome');
    // 将数组元素以逗号分隔的形式输出
    outcomeElement.textContent = arrayEvenNum.join(', ');
});

说明： #

1. 使用event.preventDefault()阻止表单提交导致的页面刷新，确保JavaScript逻辑能正常执行。
2. 每次点击提交前重置arrayEvenNum，避免多次点击后数组累积旧数据。
3. 通过parseInt()将用户输入的字符串转换为整数，解决循环中字符串与数字比较的潜在问题。
4. 添加isNaN()检查，当用户输入非数字内容时，显示提示信息。
5. 使用join(', ')将数组元素拼接为逗号分隔的字符串，清晰展示结果。

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