堆栈内存溢出
  简体   繁体   English

填写表单时使用 EventListener 显示提交按钮

[英]use EventListener to display submit button when a form is filled

 原文  2020-07-28 10:10:44  2   3    javascript/ html/ dom-events/ event-listener

问题描述

I'm a beginner in javascript and we where given a task at uni to create a hangman game using input fields inside an html form .我是javascript的初学者，我们在 uni 的任务是使用html form中的input fields创建hangman game 。 I want to use an event listener to display a submit button when all the input fields are filled and whenever I want to delete a letter the button must obviously go away.我想使用event listener器在all the input fields are filled时显示submit按钮，并且每当我想删除一个字母时，该按钮显然必须 go 离开。 I have written code below that displays input fields in a form container depending on the letter size of the give word (ex. word = "hi" => 2 input fields to fill for "hi" ) .My problem is that I have no clue how to create this eventListener function and I would appreciate your help with this.我在下面编写了代码，根据给定单词的字母大小在表单容器中显示输入字段(ex. word = "hi" => 2 input fields to fill for "hi" )我的问题是我没有线索如何创建这个 eventListener function，我会很感激你的帮助。

My code:我的代码： 

 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>

The word is given as a random string and you have to guess the correct word in the above code.该单词以随机字符串的形式给出，您必须在上述代码中猜出正确的单词。 Thank you in advance.先感谢您。

3 个解决方案

解决方案1
 1  2020-07-28 10:35:22

You likely want this你可能想要这个

  1. addEventListener on the window.load window.load 上的 addEventListener
  2. addEventListener on the letters字母上的 addEventListener
  3. toggle the class切换 class
  4. Note I added a hide class to the button to turn it off注意我在按钮上添加了一个隐藏 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

I have added this fiddle, where I am going through all input fields and adding a listener, then inside that go through each field and based upon it's content I show or hide the submit button.我添加了这个小提琴，我将在其中遍历所有输入字段并添加一个侦听器，然后在 go 中通过每个字段并根据其内容显示或隐藏提交按钮。

Fiddle小提琴

 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

This one contains another feature.这个包含另一个功能。 When one field is filled, it gets to the next one automaticly.当一个字段被填写时，它会自动进入下一个字段。 Good luck.祝你好运。 

 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 填写表格时可点击提交按钮 - Submit button clickable when form is filled in 将 eventListener 添加到表单中的提交按钮 - Adding eventListener to Submit-Button in a Form 填写表格后，提交按钮将不会启用 - Submit Button Won't Be Enabled When Form is Filled 当我单击提交按钮时，在div中显示表单填充数据 - Show form filled data in div when i clicked on submit button 如果填写了文本字段，则禁用表单提交按钮 - Disable Form submit button if text field filled in 如果未填写表单，则禁用提交按钮 - Disable submit button if form not filled out 仅当在步骤向导表单中填写所有字段时，才激活提交按钮 - activate submit button only when all the fields are filled in step wizard form 按钮上的事件监听器显示div - Eventlistener on button to display div 填写第一个表单并单击提交按钮后，显示“隐藏”表单 - Displaying a 'hidden' form once the first form is filled and submit button clicked 如果表单未填写，请禁用提交按钮并更改按钮的CSS - Disable submit button and change CSS of button if form not filled
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM