如何让数组忽略非数字输入并实现每个数字单独占一行输出？

问题1：忽略非数字输入实现方案 #

• 将输入的内容先转为Number类型，通过isNaN()方法判断是否为有效数字，无效直接拦截不存入数组
• 额外增加空值拦截，存入完成后清空输入框优化后续输入体验

问题2：每个数字单独占一行输出实现方案 #

• 原代码直接操作输入框做输出属于逻辑错误，输入框本身不支持多行内容展示，首先需要在HTML中新增独立的结果输出容器
• 排序完成后调用数组的join('<br>')方法，用换行标签拼接所有数字，赋值给输出容器的innerHTML属性即可实现每行展示一个数字

修正后完整代码 #

HTML代码

<input type="number" id="userinput" /> 
<input type="button" onclick="addTo()" value="Add Number" /> 
<button onclick="sortNumbers()">Sort</button>
<!-- 新增结果输出容器 -->
<div id="result"></div>

JS代码

var myarr = []; 

function addTo() { 
    const inputVal = Number(document.getElementById("userinput").value);
    // 非数字、空输入直接拦截
    if(isNaN(inputVal)) {
        document.getElementById("userinput").value = '';
        return;
    }
    myarr.push(inputVal); 
    // 清空输入框方便下一次输入
    document.getElementById("userinput").value = '';
    console.log(myarr);
}; 
 
function sortNumbers() {
    myarr.sort(function(a, b){return a - b});
    // 拼接换行符输出到结果容器
    document.getElementById("result").innerHTML = myarr.join('<br>');
    console.log(myarr);
}

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