use EventListener to display submit button when a form is filled

Question

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 . 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. 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.

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.

Answer 1

You likely want this

addEventListener on the window.load
addEventListener on the letters
toggle the class

Note I added a hide class to the button to turn it off

 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>

Answer 2

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.

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>

Answer 3

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>

use EventListener to display submit button when a form is filled

Question

3 answers

solution1
1 2020-07-28 10:35:22

solution2
0 ACCPTED 2020-07-28 10:37:58

solution3
0 2020-07-28 10:38:38

use EventListener to display submit button when a form is filled

Question

3 answers

solution1 1 2020-07-28 10:35:22

solution2 0 ACCPTED 2020-07-28 10:37:58

solution3 0 2020-07-28 10:38:38

solution1
1 2020-07-28 10:35:22

solution2
0 ACCPTED 2020-07-28 10:37:58

solution3
0 2020-07-28 10:38:38