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>
2 answers
solution1
1 ACCPTED 2020-07-17 22:10:03
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>
solution2
0 2020-07-17 22:15:46
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.