Javascript 使用 select 元素创建输入字段
[英]Javascript create input field using a select element
问题描述
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!我希望有人可以帮助我（新手程序员）如何使用 Javascript 动态创建输入文本字段。谢谢！
//*****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 个解决方案
解决方案1
1 已采纳 2020-07-17 22:10:03
You need not wrap your fields in a <form> .您无需将字段包装在<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.您可以简单地使用<div>作为包装器。 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.执行此操作后，您可以删除 HTML 属性action和method ，因为这些属性不再是您的代码库所必需的，因为您不再提交表单。
As for the script, simply move the gathering of the input inside of the function not outside.至于脚本，只需将输入的集合移到 function 内部而不是外部。 So onclick event, that is the time you get the input from the <select>所以 onclick 事件，就是你从<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>
解决方案2
0 2020-07-17 22:15:46
When you submit the action takes hold and index.html is loaded.当您提交时，操作会生效并加载 index.html。 Use event.preventDefault() to stop this load.使用 event.preventDefault() 停止此加载。 place response inside the function so each time submit is pressed it captures the value of the select box将响应放在 function 中，因此每次按下提交时，它都会捕获 select 框的值
//*****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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.