使用 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() {

  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

我添加了这个小提琴，我将在其中遍历所有输入字段并添加一个侦听器，然后在其中遍历每个字段并根据其内容显示或隐藏提交按钮。

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

这个包含另一个功能。当一个字段被填充时，它会自动进入下一个字段。祝你好运。

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>