首頁猿問使用 EventListener...

使用 EventListener 在填寫表單時顯示提交按鈕

JavaScript

繁華開滿天機 2022-12-09 19:21:34

我是初學者javascript，我們在 uni 的任務hangman game是input fields在html form. 我想使用 anevent listener來顯示一個submit按鈕all the input fields are filled，當我想刪除一個字母時，按鈕顯然必須消失。我在下面編寫了代碼，根據(jù)給定單詞的字母大小在表單容器中顯示輸入字段。我的(ex. word = "hi" => 2 input fields to fill for "hi" )問題是我不知道如何創(chuàng)建此 eventListener 函數(shù)，我將感謝您對此的幫助。我的代碼：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; }這個詞是一個隨機字符串，你必須在上面的代碼中猜出正確的詞。先感謝您。

查看完整描述

3 回答

拉莫斯之舞

TA貢獻1820條經(jīng)驗獲得超10個贊

你可能想要這個

在 window.load 上添加事件監(jiān)聽器

在字母上添加事件監(jiān)聽器

切換類

注意我向按鈕添加了一個隱藏類以將其關閉

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}

<button type="submit" class="hide" id="submitbtn">Submit</button>

</form>

</div>

反對回復 2022-12-09

嚕嚕噠

TA貢獻1784條經(jīng)驗獲得超7個贊

我添加了這個小提琴，我將在其中遍歷所有輸入字段并添加一個偵聽器，然后在其中遍歷每個字段并根據(jù)其內容顯示或隱藏提交按鈕。

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>

Submit

</button>

</form>

反對回復 2022-12-09

LEATH

TA貢獻1936條經(jīng)驗獲得超7個贊

這個包含另一個功能。當一個字段被填充時，它會自動進入下一個字段。祝你好運。

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;

}

<button type = "submit" id="submitbtn">Submit</button>

</form>

</div>

</body>

反對回復 2022-12-09

3 回答
0 關注
154 瀏覽

關注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

使用 EventListener 在填寫表單時顯示提交按鈕

使用 EventListener 在填寫表單時顯示提交按鈕

3 回答

添加回答