How to make an array of the User's input

Question

The code is supposed to randomly select from the user input to generate a random one. The HTML includes a form where the user can input values which are saved, but I do not know how to store them in an array in javascript where the let decision is what stores them. When the user inputs an option, they press submit where the javascript appends a child with the option that was input (this is not included) In the javascript, but what is included is the random decision button, if let decision was an array, the button would randomly choose from the array. The HTML:

let btn = document.getElementById('decide');
let output = document.getElementById('output');
const option_input_el = document.createElement('input');
option_input_el.classList.add('text');
option_input_el.type = 'text';
option_input_el.value = task;
option_input_el.setAttribute('readonly', 'readonly');
let decision = []; /*how to make array of the user inputs*/

btn.addEventListener('click', function() {
    var chosen = decision[Math.floor(Math.random() * decision.length)];
    output.innerHTML = chosen;
});
//this is our code for the decicon

<body>
  <!--Our input of choices-->
  <div id="center">
    <header>
      <h1 id="Title">Input Your Choices</h1>
      <form id="form">
        <input type="text" id="newT" placeholder="Options" />
        <input type="submit" id="sumbitT" value="Add" />
      </form>
    </header>
  </div>

  <main>
    <section class="option-list">
      <h2 id="option">Your Options</h2>
      <div id="options"></div>
    </section>
    <div class="container">
      <button id="decide"> Let's Decide! </button>
      <div id="output">DECISION</div>
    </div>
  </main>

Wild guess—let decision = Array.from(document.querySelectorAll('.user_input')).map(ui => ui.value); — bloodyKnuckles
– bloodyKnuckles, Commented Oct 10, 2022 at 0:58

MaDragon7 · Accepted Answer · 2022-10-11 07:55:03Z

your HTML code didn't work properly for what you wanted to achieve, so I had to rework it.

to make an array from user input, you can use push to the input.value to an array.

I used only two functions to do what you asked for. and what happens is simple:

1- when the user click add button, it get user's input then

2- push it into an array.

3- display it in the options div.

4- when the user click decide button, it will select a random value from the displayed array. then display it on the decision div.

var input = document.getElementById("input");
var inputArr = [];
var addBtn = document.getElementById("add-btn");
var display = document.getElementById("options-list");
var decideBtn = document.getElementById("decide-btn");
var resultDisplay = document.getElementById("random-output");


addBtn.addEventListener("click", addAnddisplay);

function addAnddisplay() {

    inputArr.push(input.value);

    display.textContent = inputArr;   
}

decideBtn.addEventListener("click", decide);

function decide() {
    var decision  = inputArr[Math.floor(Math.random() * inputArr.length)];
    resultDisplay.textContent = decision ;
}

  <h1 id="Title">Input Your Choices</h1>
        
        <input type="data" id="input" placeholder="Options" />
        <button id="add-btn">Add</button>
        <!-- <input type="submit" id="add-btn" value="Add" /> -->
      
        <h2>Your Options</h2>
        <div id="options-list"></div>
      
        <button id="decide-btn"> Let's Decide! </button>
        <div id="random-output"></div>

Collectives™ on Stack Overflow

How to make an array of the User's input

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related