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

Question

我是初学者javascript，我们在 uni 的任务hangman game是input fields在html form. 我想使用 anevent listener来显示一个submit按钮all the input fields are filled，当我想删除一个字母时，按钮显然必须消失。我在下面编写了代码，根据给定单词的字母大小在表单容器中显示输入字段。我的(ex. word = "hi" => 2 input fields to fill for "hi" )问题是我不知道如何创建此 eventListener 函数，我将感谢您对此的帮助。

我的代码：

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; 

}

这个词是一个随机字符串，你必须在上面的代码中猜出正确的词。先感谢您 。

Answer 1

你可能想要这个在 window.load 上添加事件监听器在字母上添加事件监听器切换类注意我向按钮添加了一个隐藏类以将其关闭function hangman() {&nbsp; var island = "Rhodes"; //the given word that is supposed to be found&nbsp;&nbsp; var t = document.createTextNode(shuffleWord(island))&nbsp; document.getElementById("hidden-word").appendChild(t);&nbsp; createSpaces(island);}function shuffleWord(word) {&nbsp; var shuffledWord = '';&nbsp; word = word.split('');&nbsp; while (word.length > 0) {&nbsp; &nbsp; shuffledWord += word.splice(word.length * Math.random() << 0, 1);&nbsp; }&nbsp; return shuffledWord;}function createSpaces(text) {&nbsp; for (var i = 0; i < text.length; i++) {&nbsp; &nbsp; var space = document.createElement("input");&nbsp; &nbsp; space.setAttribute("class", "dash");&nbsp; &nbsp; document.getElementById("hangman-container").appendChild(space);&nbsp; }}window.addEventListener("load",function() { // on page load&nbsp; document.getElementById("t-box").addEventListener("input",function(e) { // any input in the t-box&nbsp; &nbsp; const tgt = e.target; // the actual input&nbsp;&nbsp; &nbsp; if (tgt.classList.contains("dash")) { // is it a "dash"?&nbsp; &nbsp; &nbsp; const letters = [...document.querySelectorAll(".dash")]; // get all dash&nbsp; &nbsp; &nbsp; length = letters.filter(inp => inp.value.trim() !=="").length; // filter on filled in&nbsp; &nbsp; &nbsp; document.getElementById("submitbtn").classList.toggle("hide",length<letters.length); // toggle hide class if filled&nbsp; &nbsp; }&nbsp; })&nbsp; hangman()});body,html {&nbsp; background-size: cover;}body {&nbsp; margin: 0;}.transparent-box {&nbsp; border: none;&nbsp; position: absolute;&nbsp; top: 10%;&nbsp; left: 15%;&nbsp; background-color: black;&nbsp; height: 500px;&nbsp; width: 70%;&nbsp; opacity: 0.6;}.transparent-box p {&nbsp; color: white;&nbsp; text-align: center;}.transparent-box h1 {&nbsp; color: white;&nbsp; position: relative;&nbsp; text-align: center;&nbsp; font-size: 20px;&nbsp; top: 30px;}#hangman-container {&nbsp; display: block;&nbsp; position: relative;&nbsp; width: auto;&nbsp; top: 30%;&nbsp; left: 0%;&nbsp; background-color: transparent;&nbsp; display: flex;&nbsp; flex-direction: row;&nbsp; justify-content: space-evenly;}.dash {&nbsp; margin: 0;&nbsp; align-items: flex-start;&nbsp; width: 5%;&nbsp; border: none;&nbsp; border-radius: 5%;&nbsp; background-color: turquoise;&nbsp; color: red;&nbsp; font-size: 30px;}.dash:focus {&nbsp; opacity: 0.8;}#submitbtn {&nbsp; position: absolute;&nbsp; top: 200%;&nbsp; left: 80%;&nbsp; float: right;}.hide { display:none}<div class="transparent-box" id="t-box">&nbsp; &nbsp; <p>Play here </p>&nbsp; &nbsp; <h1 id="hidden-word">The word is : </h1>&nbsp; &nbsp; <form id="hangman-container" method="POST">&nbsp; &nbsp; &nbsp; <button type="submit" class="hide" id="submitbtn">Submit</button>&nbsp; &nbsp; </form>&nbsp; </div>

Answer 2

我添加了这个小提琴，我将在其中遍历所有输入字段并添加一个侦听器，然后在其中遍历每个字段并根据其内容显示或隐藏提交按钮。const inputLists = document.querySelectorAll("input");let showButton = true;document.querySelectorAll("input").forEach((el) => {&nbsp; el.addEventListener('input', (evt => {&nbsp; &nbsp; inputLists.forEach((ip) => {&nbsp; &nbsp; &nbsp; console.log(ip.value);&nbsp; &nbsp; &nbsp; if (ip.value === '') {&nbsp; &nbsp; &nbsp; &nbsp; showButton = false;&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; showButton = true;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; &nbsp; if (showButton) {&nbsp; &nbsp; &nbsp; document.querySelector('button').style.display = 'block'&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; document.querySelector('button').style.display = 'none'&nbsp; &nbsp; }&nbsp; }))})button {&nbsp; display: none;}<form>&nbsp; <input type="text">&nbsp; <input type="text">&nbsp; <button type="submit">&nbsp; &nbsp; Submit&nbsp; </button></form>

Answer 3

这个包含另一个功能。当一个字段被填充时，它会自动进入下一个字段。祝你好运。var island;function hangman(){&nbsp; &nbsp; island = "Rhodes"; //the given word that is supposed to be found&nbsp;&nbsp; &nbsp; var t = document.createTextNode(shuffleWord(island))&nbsp; &nbsp; document.getElementById("hidden-word").appendChild(t);&nbsp; &nbsp; createSpaces(island);}function shuffleWord (word){&nbsp; &nbsp; var shuffledWord = '';&nbsp; &nbsp; word = word.split('');&nbsp; &nbsp; while (word.length > 0) {&nbsp; &nbsp; &nbsp; shuffledWord +=&nbsp; word.splice(word.length * Math.random() << 0, 1);&nbsp; &nbsp; }&nbsp; &nbsp; return shuffledWord;}function createSpaces(text){&nbsp; &nbsp; var spaces = new Array(island.length);&nbsp; &nbsp; for(var i=0;i<text.length;i++){&nbsp; &nbsp; &nbsp; let n=i;&nbsp; &nbsp; &nbsp; spaces[i] = document.createElement("input");&nbsp; &nbsp; &nbsp; spaces[i].setAttribute("class" , "dash");&nbsp; &nbsp; &nbsp; spaces[i].maxLength = 1;&nbsp; &nbsp; &nbsp; spaces[i].oninput = function () {&nbsp; &nbsp; &nbsp; &nbsp; if (this.length == 0) return;&nbsp; &nbsp; &nbsp; &nbsp; if (n == island.length-1) document.getElementById("submitbtn").classList.add("show");&nbsp; &nbsp; &nbsp; &nbsp; if (n < island.length-1) spaces[n+1].focus();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; document.getElementById("hangman-container").appendChild(spaces[i]);&nbsp; &nbsp; }}body, html {&nbsp; &nbsp; background-size: cover;}body{&nbsp; &nbsp; margin: 0;}.transparent-box{&nbsp; &nbsp; border:none;&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; top:10%;&nbsp; &nbsp; left:15%;&nbsp; &nbsp; background-color:black;&nbsp; &nbsp; height:500px;&nbsp; &nbsp; width:70%;&nbsp; &nbsp; opacity: 0.6;}.transparent-box p{&nbsp; &nbsp; color:white;&nbsp;&nbsp;&nbsp; &nbsp; text-align:center;}.transparent-box h1{&nbsp; &nbsp; color:white;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; text-align:center;&nbsp; &nbsp; font-size:20px;&nbsp; &nbsp; top:30px;}#hangman-container{&nbsp; &nbsp; display: block;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; width:auto;&nbsp; &nbsp; top:30%;&nbsp; &nbsp; left:0%;&nbsp; &nbsp; background-color: transparent;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: row;&nbsp; &nbsp; justify-content: space-evenly;}.dash{&nbsp; &nbsp; margin:0;&nbsp; &nbsp; align-items: flex-start;&nbsp; &nbsp; width:5%;&nbsp; &nbsp; border:none;&nbsp; &nbsp; border-radius: 5%;&nbsp; &nbsp; background-color: turquoise;&nbsp; &nbsp; color:red;&nbsp; &nbsp; font-size:30px;}.dash:focus{&nbsp; &nbsp; opacity:0.8;}#submitbtn{&nbsp; &nbsp; display:none;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top:200%;&nbsp; &nbsp; left:80%;&nbsp; &nbsp; float:right;&nbsp;}#submitbtn.show {&nbsp; &nbsp; display: inline-block;}<body onload=hangman()>&nbsp; &nbsp; &nbsp; &nbsp; <div class = "transparent-box" id = "t-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Play here </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 id = "hidden-word">The word is : </h1>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form id&nbsp; = "hangman-container" method="POST">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type = "submit" id="submitbtn">Submit</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;</body>