文章/答案/技术大牛

发布

社区首页 >问答首页 >填写表单时使用EventListener显示“提交”按钮

问填写表单时使用EventListener显示“提交”按钮
EN

Stack Overflow用户

提问于 2020-07-28 10:10:44

回答 3查看 65关注 0票数 0

我是javascript的初学者，我们给了uni一项任务，在html form中使用input fields创建一个html form。我想使用event listener来显示submit按钮，而每当我想要删除一个字母时，该按钮显然就会消失。下面编写的代码显示表单容器中的输入字段，这取决于给予词(ex. word = "hi" => 2 input fields to fill for "hi" ).My的字母大小。问题是，我不知道如何创建这个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>

这个单词是作为随机字符串给出的，您必须在上面的代码中猜出正确的单词。提前谢谢你。

html

dom-events

event-listener

javascript

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-07-28 10:37:58

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

小提琴

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>

票数 0

Stack Overflow用户

发布于 2020-07-28 10:35:22

你可能想要这个

addEventListener on window.load
字母上的addEventListener
切换这个类
注意，我在按钮中添加了一个隐藏类，以关闭函数hangman() { var island = "Rhodes"；//给定的单词应该是var t=document.createTextNode(shuffleWord(岛))shuffleWord createSpaces(海岛)；}函数shuffleWord( word ) { var shuffledWord =‘；word =word.split(’)；而(word.length > 0) { shuffledWord += word.splice(word.length * Math.random() << 0，1)；}返回shuffledWord；}函数createSpaces(文本){ for (var i= 0；i< text.length；i++) { var空间=document.createElement(“输入”)；space.setAttribute("class"，“破折号”)；}window.addEventListener(“加载”，函数(){ //页加载函数(E){ // t/ t-box const tgt =e.target中的任何输入；//实际输入if (tgt.classList.contains( "dash“)) { //是”dash“吗？const字符= ...document.querySelectorAll(".dash")；// get all dash length = letters.filter(inp => inp.value.trim()！==“).length；// filter on get in length正文，html {背景-大小:封面；}正文{边距: 0；}.透明框{边框:无；位置:绝对；顶部: 10%；左: 15%；背景颜色:黑色；高度:500 p；宽度: 70%；不透明度: 0.6；}.透明框p{色:白色；文本-对齐:中心；}.透明框h1 {色:白；位置:相对；文本-对齐:中心；字体-大小:20 p；顶部:30 30；}#hangman-容器{显示；位置:相对位置；宽度:自动；顶部: 30%；左: 0；背景色:透明；显示:挠曲；弯曲方向:行；对齐-内容:空格-均匀；} .dash {边距:0；对齐项:弹性-开始；宽度: 5%；边框:无；边框-半径: 5%；背景颜色:绿松石；颜色:红色；字体大小:30 30；} .dash:focus {不透明度: 0.8；} #submitbtn {位置:绝对；顶部: 200%；左: 80%；浮点数:右；} .hide {显示:无}

票数 1

Stack Overflow用户

发布于 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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63131735

复制

相似问题

问填写表单时使用EventListener显示“提交”按钮
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问填写表单时使用EventListener显示“提交”按钮EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问填写表单时使用EventListener显示“提交”按钮
EN