如何使用 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函数创建一个包含一定数量项目的数组，并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

这段代码看起来有点冗长，因为我有一个函数可以在输入中只输入数字和 space 元素。并添加了一些过滤器。

请自行尝试此代码。如果有不明白的地方请在下方留言，我很高兴有人解释。

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

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 从用户那里获取数组和数组元素大小的输入？

How to take input from user for size of an array and array elements using dom in javascript?

javascript

arrays

dom

web-development-server