Javascript create input field using a select element

Question

I am trying to create a simple website that calculates a card game score. The website will prompt a user to enter the number of players and return that number of fields for name inputs.

However, as my code stands currently, when a user enters the number of players, the website only shows one field for maybe a second and disappears. I was hoping that someone could help me (a novice programmer) on how to create input text fields dynamically with Javascript. Thanks!

//*****script.js*****


  let response = parseInt(document.getElementById("players").value);

const playerNames = () => {

  let player;
  for (let i = 0; i < response; i++) {
    player = document.createElement('input');
    player.type = 'text';
    document.body.appendChild(player);
  };
}

<!DOCTYPE html>
<html>
  <head>
    <title>Home</title>
  </head>
  <body>
    <form class="start" action="index.html" method="post">
      <p>How many players?</p>
      <select id="players" class="" name="">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <input type="submit" value="Submit" onclick="playerNames()"/>

    </form>
    <script src="script.js"></script>
  </body>
</html>

Replace your function to this const playerNames = (e) => { let response = parseInt(document.getElementById("players").value); e.preventDefault() let player; for (let i = 0; i < response; i++) { player = document.createElement('input'); player.type = 'text'; document.body.appendChild(player); }; } — Always Helping
– Always Helping, Commented Jul 17, 2020 at 22:18
Replace your submit button to this : <input type="submit" value="Submit" onclick="playerNames(event)"/> — Always Helping
– Always Helping, Commented Jul 17, 2020 at 22:19

95faf8e76605e973 · Accepted Answer · 2020-07-17 23:14:12Z

1

You need not wrap your fields in a <form>. If you do this, since your button is type of submit: by default your browser will attempt to submit the form to another page & redirect. You can simply use <div> as a wrapper. Once you do this, you can remove the HTML attributes action & method since these attributes are no longer essential to your code base as you are no longer submitting a form.

As for the script, simply move the gathering of the input inside of the function not outside. So onclick event, that is the time you get the input from the <select>

<body>
  <div class="start">
    <p>How many players?</p>
    <select id="players" class="" name="">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
    <button onclick="playerNames()">Submit</button>

  </div>
  <script>
    //*****script.js*****
    const playerNames = () => {
      let response = parseInt(document.getElementById("players").value);
      let player;
      for (let i = 0; i < response; i++) {
        player = document.createElement('input');
        player.type = 'text';
        document.body.appendChild(player);
      };
    }
  </script>
</body>

edited Jul 17, 2020 at 23:14

answered Jul 17, 2020 at 22:10

95faf8e76605e973

14.3k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Always Helping Over a year ago

Still wrong. This will reload the page. Read the comments as well before answering.

95faf8e76605e973 Over a year ago

It will not "reload the page". Run the code & check your network tab. No request is going to be made. Run the code as well before commenting.

Stephen P Over a year ago

You're getting rid of the form (changing to a div) you should remove the action= and method= also. They're distracting and made me miss the form element was changed, even though you mentioned it in your answer text.

Always Helping Over a year ago

@StephenP Agree. This is not what OP wanted. This is NOT a good answer at all. HTML is changed to a div where in the question does OP said so and wanted that ? Hence why i downvoted.

Always Helping Over a year ago

@95faf8e76605e973 why would you change a form to a div just to avoid reloading the page which i highlighted in my first comment. Please fix your answer.

|

DCR · Accepted Answer · 2020-07-17 22:17:42Z

0

When you submit the action takes hold and index.html is loaded. Use event.preventDefault() to stop this load. place response inside the function so each time submit is pressed it captures the value of the select box

//*****script.js*****



const playerNames = () => {
event.preventDefault();

let response = parseInt(document.getElementById("players").value);

  let player;
  for (let i = 0; i < response; i++) {
    player = document.createElement('input');
    player.type = 'text';
    document.body.appendChild(player);
  };
}

<!DOCTYPE html>
<html>
  <head>
    <title>Home</title>
  </head>
  <body>
    <form class="start" action="index.html" method="post">
      <p>How many players?</p>
      <select id="players" class="" name="">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <input type="submit" value="Submit" onclick="playerNames()"/>

    </form>
    <script src="script.js"></script>
  </body>
</html>

edited Jul 17, 2020 at 22:17

answered Jul 17, 2020 at 22:15

DCR

15.8k13 gold badges61 silver badges131 bronze badges

1 Comment

Always Helping Over a year ago

An answer should not be code only - Read the comments as well before answering. this is already answered.

Collectives™ on Stack Overflow

Javascript create input field using a select element

2 Answers 2

10 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related