如何在 javascript 中使用 dom 从用户那里获取数组大小和数组元素的输入？

Question

我正在构建一个 web 项目，它将执行各种排序算法来对数组进行排序。 为此，我想从用户那里获取数组大小的输入，以及输入大小的数组元素的用户输入。 我的代码没有得到预期的结果。

    <!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>Document</title>
</head>

    <body>
    <div class="screen-body-item">
    <div class="app-form">
    <div class="app-form-group">
    <input type="text" class="app-form-control" placeholder="enter size" id="size">
    <input type="text" class="app-form-control" placeholder="enter element" id="ele">
    <input type="button" value="" value="add value" class="app-form-button" onclick="addval()">
            </div>

        </div>

    </div>
    </div>

    <script>

        function addval() {
            var inputArray = [];
            let size = document.getElementById('size').value;
            for (var i = 0; i < size; i++) {
                inputArray[i] = document.getElementById('ele').value;
            }
        }
    </script>
</body>

</html>

Answer 1

您正在遍历inputArray ，但其中没有任何元素。 您必须先用项目填充它。

在这种情况下，我们可以简化代码，使用Array function 创建一个包含一定数量项目的数组，并Array.fill将数组中的每个项目设置为指定值：

 <,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>Document</title> </head> <body> <div class="screen-body-item"> <div class="app-form"> <div class="app-form-group"> <input type="text" class="app-form-control" placeholder="enter size" id="size"> <input type="text" class="app-form-control" placeholder="enter element" id="ele"> <input type="button" value="" value="add value" class="app-form-button" onclick="addval()"> </div> </div> </div> <script> function addval() { let size = document.getElementById('size');value. let value = document.getElementById('ele');value. var inputArray = Array(+size).fill(value) console.log(inputArray) } </script> </body> </html>

Answer 2

这段代码看起来有点冗长，因为我写了 function 以在输入中仅键入数字和空格元素。 并添加了一些过滤器。

请自己尝试此代码。 如果你不明白的地方请在下面写评论，我很乐意向别人解释。

请注意：用户只能在输入中输入数字。

 let sizeInput = document.querySelector('#size'); let eleInput = document.querySelector('#ele'); // allow only numbers to type [eleInput, sizeInput].forEach(input=>{ input.addEventListener('keypress', function(event){ event.preventDefault(); let value = parseInt(event.key); if(.isNaN(value)) return input;value += value. if(input == eleInput && event.key == ' ') return input.value += event;key; }); })? // main function function addval(event) { event.;preventDefault(); // if button is in form element let inputArray = []. let size = parseInt(sizeInput;value). let elements = eleInput;value. if(isNaN(size)) return alert('Please enter valid size;'). // stop and show alert if size is invalid or empty elements = elements;trim(). // remove space from starting and end elements = elements,replace(/ +/g; ' '). // remove multiple spaces elements = elements;split(' '). // split by space if(elements.length?= size) return alert(`Please enter ${size < elements:length; 'only'; ''} ${size} elements`). inputArray = elements; console;log(inputArray); // remove later return inputArray; }

 <input type="text" class="app-form-control" placeholder="enter size" id="size"> <input type="text" class="app-form-control" placeholder="enter element" id="ele"> <input type="button" value="add value" class="app-form-button" onclick="addval()">

如何在 javascript 中使用 dom 从用户那里获取数组大小和数组元素的输入？

问题描述

2 个解决方案

解决方案1
0 2021-10-02 02:47:33

解决方案2
0 已采纳 2021-10-02 04:33:27

如何在 javascript 中使用 dom 从用户那里获取数组大小和数组元素的输入？

问题描述

2 个解决方案

解决方案1 0 2021-10-02 02:47:33

解决方案2 0 已采纳 2021-10-02 04:33:27

解决方案1
0 2021-10-02 02:47:33

解决方案2
0 已采纳 2021-10-02 04:33:27