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

Question

我是 javascript 的初学者，我们在 uni 的任务是在 html form 中使用 input fields 创建 hangman game 。我想在 all the input fields are filled 时使用 event listener 来显示 submit 按钮，每当我想删除一个字母时，按钮显然必须消失。我在下面编写了代码，根据给定单词 (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; 
}

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

单词以随机字符串的形式给出，您必须在上面的代码中猜出正确的单词。提前谢谢你。

Answer 1

你可能想要这个

在 window.load
字母上的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>

Answer 2

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

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

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

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>

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

use EventListener to display submit button when a form is filled

html

javascript

event-listener

dom-events