填写表单时使用 EventListener 显示提交按钮
[英]use EventListener to display submit button when a form is filled
问题描述
我是javascript的初学者，我们在 uni 的任务是使用html form中的input fields创建hangman game 。 我想使用event listener器在all the input fields are filled时显示submit按钮，并且每当我想删除一个字母时，该按钮显然必须 go 离开。 我在下面编写了代码，根据给定单词的字母大小在表单容器中显示输入字段(ex. word = "hi" => 2 input fields to fill for "hi" )我的问题是我没有线索如何创建这个 eventListener function，我会很感激你的帮助。
我的代码：
function hangman(){ var island = "Rhodes"; //the given word that is supposed to be found var t = document.createTextNode(shuffleWord(island)) document.getElementById("hidden-word").appendChild(t); createSpaces(island); } function shuffleWord (word){ var shuffledWord = ''; word = word.split(''); while (word.length > 0) { shuffledWord += word.splice(word.length * Math.random() << 0, 1); } return shuffledWord; } function createSpaces(text){ for(var i=0;i<text.length;i++){ var space = document.createElement("input"); space.setAttribute("class", "dash"); document.getElementById("hangman-container").appendChild(space); } }
body, html { background-size: cover; } body{ margin: 0; }.transparent-box{ border:none; position:absolute; top:10%; left:15%; background-color:black; height:500px; width:70%; opacity: 0.6; }.transparent-box p{ color:white; text-align:center; }.transparent-box h1{ color:white; position: relative; text-align:center; font-size:20px; top:30px; } #hangman-container{ display: block; position: relative; width:auto; top:30%; left:0%; background-color: transparent; display: flex; flex-direction: row; justify-content: space-evenly; }.dash{ margin:0; align-items: flex-start; width:5%; border:none; border-radius: 5%; background-color: turquoise; color:red; font-size:30px; }.dash:focus{ opacity:0.8; } #submitbtn{ display:none; position: absolute; top:200%; left:80%; float:right; }
<body onload=hangman()> <div class = "transparent-box" id = "t-box"> <p>Play here </p> <h1 id = "hidden-word">The word is: </h1> <form id = "hangman-container" method="POST"> <button type = "submit" id="submitbtn">Submit</button> </form> </div> </body>
该单词以随机字符串的形式给出，您必须在上述代码中猜出正确的单词。 先感谢您。
3 个解决方案
解决方案1
1 2020-07-28 10:35:22
你可能想要这个
- window.load 上的 addEventListener
- 字母上的 addEventListener
- 切换 class
- 注意我在按钮上添加了一个隐藏 class 以将其关闭
function hangman() { var island = "Rhodes"; //the given word that is supposed to be found var t = document.createTextNode(shuffleWord(island)) document.getElementById("hidden-word").appendChild(t); createSpaces(island); } function shuffleWord(word) { var shuffledWord = ''; word = word.split(''); while (word.length > 0) { shuffledWord += word.splice(word.length * Math.random() << 0, 1); } return shuffledWord; } function createSpaces(text) { for (var i = 0; i < text.length; i++) { var space = document.createElement("input"); space.setAttribute("class", "dash"); document.getElementById("hangman-container").appendChild(space); } } window.addEventListener("load",function() { // on page load document.getElementById("t-box").addEventListener("input",function(e) { // any input in the t-box const tgt = e.target; // the actual input if (tgt.classList.contains("dash")) { // is it a "dash"? const letters = [...document.querySelectorAll(".dash")]; // get all dash length = letters.filter(inp => inp.value.trim().=="");length. // filter on filled in document.getElementById("submitbtn").classList,toggle("hide".length<letters;length); // toggle hide class if filled } }) hangman() });body, html { background-size: cover; } body { margin: 0; }.transparent-box { border: none; position: absolute; top: 10%; left: 15%; background-color: black; height: 500px; width: 70%; opacity: 0.6; }.transparent-box p { color: white; text-align: center; }.transparent-box h1 { color: white; position: relative; text-align: center; font-size: 20px; top: 30px; } #hangman-container { display: block; position: relative; width: auto; top: 30%; left: 0%; background-color: transparent; display: flex; flex-direction: row; justify-content: space-evenly; }.dash { margin: 0; align-items: flex-start; width: 5%; border: none; border-radius: 5%; background-color: turquoise; color: red; font-size: 30px; }.dash:focus { opacity: 0.8; } #submitbtn { position: absolute; top: 200%; left: 80%; float: right; }.hide { display:none}<div class="transparent-box" id="t-box"> <p>Play here </p> <h1 id="hidden-word">The word is: </h1> <form id="hangman-container" method="POST"> <button type="submit" class="hide" id="submitbtn">Submit</button> </form> </div>
解决方案2
0 已采纳 2020-07-28 10:37:58
我添加了这个小提琴，我将在其中遍历所有输入字段并添加一个侦听器，然后在 go 中通过每个字段并根据其内容显示或隐藏提交按钮。
const inputLists = document.querySelectorAll("input"); let showButton = true; document.querySelectorAll("input").forEach((el) => { el.addEventListener('input', (evt => { inputLists.forEach((ip) => { console.log(ip.value); if (ip.value === '') { showButton = false; } else { showButton = true; } }) if (showButton) { document.querySelector('button').style.display = 'block' } else { document.querySelector('button').style.display = 'none' } })) })
button { display: none; }
<form> <input type="text"> <input type="text"> <button type="submit"> Submit </button> </form>
解决方案3
0 2020-07-28 10:38:38
这个包含另一个功能。 当一个字段被填写时，它会自动进入下一个字段。 祝你好运。
var island; function hangman(){ island = "Rhodes"; //the given word that is supposed to be found var t = document.createTextNode(shuffleWord(island)) document.getElementById("hidden-word").appendChild(t); createSpaces(island); } function shuffleWord (word){ var shuffledWord = ''; word = word.split(''); while (word.length > 0) { shuffledWord += word.splice(word.length * Math.random() << 0, 1); } return shuffledWord; } function createSpaces(text){ var spaces = new Array(island.length); for(var i=0;i<text.length;i++){ let n=i; spaces[i] = document.createElement("input"); spaces[i].setAttribute("class", "dash"); spaces[i].maxLength = 1; spaces[i].oninput = function () { if (this.length == 0) return; if (n == island.length-1) document.getElementById("submitbtn").classList.add("show"); if (n < island.length-1) spaces[n+1].focus(); } document.getElementById("hangman-container").appendChild(spaces[i]); } }
body, html { background-size: cover; } body{ margin: 0; }.transparent-box{ border:none; position:absolute; top:10%; left:15%; background-color:black; height:500px; width:70%; opacity: 0.6; }.transparent-box p{ color:white; text-align:center; }.transparent-box h1{ color:white; position: relative; text-align:center; font-size:20px; top:30px; } #hangman-container{ display: block; position: relative; width:auto; top:30%; left:0%; background-color: transparent; display: flex; flex-direction: row; justify-content: space-evenly; }.dash{ margin:0; align-items: flex-start; width:5%; border:none; border-radius: 5%; background-color: turquoise; color:red; font-size:30px; }.dash:focus{ opacity:0.8; } #submitbtn{ display:none; position: absolute; top:200%; left:80%; float:right; } #submitbtn.show { display: inline-block; }
<body onload=hangman()> <div class = "transparent-box" id = "t-box"> <p>Play here </p> <h1 id = "hidden-word">The word is: </h1> <form id = "hangman-container" method="POST"> <button type = "submit" id="submitbtn">Submit</button> </form> </div> </body>
仅当在步骤向导表单中填写所有字段时，才激活提交按钮
[英]activate submit button only when all the fields are filled in step wizard form
填写第一个表单并单击提交按钮后，显示“隐藏”表单
[英]Displaying a 'hidden' form once the first form is filled and submit button clicked
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.