如何使用JavaScript DOM获取用户输入的数组大小及对应数组元素

• 你定义的inputArray是addval函数内部的局部变量，函数执行结束后变量就会被回收，后续排序逻辑根本拿不到存储的数组数据
• 现有逻辑是每次点击按钮，都会把当前元素输入框的同一个值重复填充size次到数组里，完全不符合「输入size个不同元素」的需求
• 从输入框拿到的size是字符串类型，没有转成数字做合法性校验，很容易出现逻辑错误
• 按钮标签写了两次value属性，会导致按钮显示异常

调整交互逻辑：用户先输入数组大小确认后，每次输入一个元素点击添加，直到凑够指定大小的数组即可，修复后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排序算法演示</title>
</head>
<body>
    <div class="screen-body-item">
        <div class="app-form">
            <div class="app-form-group">
                <input type="number" class="app-form-control" placeholder="输入数组大小" id="size">
                <button class="app-form-button" onclick="confirmSize()">确认大小</button>
                <br><br>
                <input type="number" class="app-form-control" placeholder="输入数组元素" id="ele" disabled>
                <button class="app-form-button" onclick="addval()" disabled>添加元素</button>
                <br><br>
                <p>已添加元素：<span id="arrayShow"></span></p>
            </div>
        </div>
    </div>

    <script>
        // 全局存储数组，后续排序逻辑可以直接调用
        let inputArray = [];
        let targetSize = 0;
        const sizeInput = document.getElementById('size');
        const eleInput = document.getElementById('ele');
        const addBtn = document.querySelector('button[onclick="addval()"]');
        const arrayShow = document.getElementById('arrayShow');

        // 确认数组大小
        function confirmSize() {
            targetSize = parseInt(sizeInput.value);
            if(isNaN(targetSize) || targetSize < 1) {
                alert('请输入有效的正整数作为数组大小');
                return;
            }
            // 重置数组和状态
            inputArray = [];
            sizeInput.disabled = true;
            eleInput.disabled = false;
            addBtn.disabled = false;
            arrayShow.innerText = '';
            alert(`数组大小已设定为${targetSize}，请开始输入元素`);
        }

        // 添加元素
        function addval() {
            const ele = parseInt(eleInput.value);
            if(isNaN(ele)) {
                alert('请输入有效的数字元素');
                eleInput.value = '';
                return;
            }
            inputArray.push(ele);
            arrayShow.innerText = inputArray.join(', ');
            eleInput.value = '';
            // 填够元素后锁定输入
            if(inputArray.length === targetSize) {
                eleInput.disabled = true;
                addBtn.disabled = true;
                sizeInput.disabled = false;
                alert('数组元素已收集完成，可以开始执行排序逻辑');
                // 后续你可以在这里调用排序算法的函数
            }
        }
    </script>
</body>
</html>

• 将存储数组的变量提升到全局作用域，后续排序逻辑可以直接调用inputArray变量拿到收集好的数组
• 调整了交互流程，先确认数组大小再逐个添加元素，符合正常的使用习惯
• 增加了输入合法性校验，避免非数字输入导致的逻辑错误
• 新增了数组预览区域，用户可以直观看到已经添加的元素

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