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

I am building a web project which will perform various sorting algorithms to sort an array. For this purpose, I want to take input from user for array size and also user input for array elements of the entered size. I am not getting the expected result by my code.

    <!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>

CodePudding user response：

You are iterating over inputArray, but it has no elements in it. You have to first populate it with items.

In this case, we can simplify the code by using the Array function to create an array with a certain number of items, and Array.fill to set each item in the array to a specified 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>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>

CodePudding user response：

This Code looks little lengthy, because I have wirten function to type only number and space element in inputs. and added some filters.

Please try your self this code. If you can't understand somewhere please write comment below, I feel good to explain someone.

Please note: User only can enter numbers in inputs.

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()">