填寫表單時使用 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.