尝试有条件地禁用旋转木马类型应用程序的多个输入字段 - 如果输入字段为空，则应禁用下一个按钮
Trying to conditionally disable multiple input fields for a carousel type app - The next button should be disabled if input field is empty
首先，如果这个问题被反复询问，我深表歉意。
我已经搜索过，但我找不到适合我的情况的普通 javascript 答案。
我正在挑战并构建了一个带有 2 个按钮的 slider/carousel 类型的应用程序，一个用于下一张幻灯片，一个用于上一张幻灯片。
一些幻灯片（div）有输入字段，我想添加一个条件，如果任何输入字段为空，则应禁用 'next' 按钮。
我已经在输入字段上设置了一个 'input' eventListener 并尝试如下遍历输入字段。
nextButton.disabled = true;
inputs.forEach((input) =>
input.addEventListener("keyup", () => {
inputs.forEach((value) =>
value.value != ""
? (nextButton.disabled = false)
: (nextButton.disabled = true)
);
})
);
但是，我无法让它正常工作。我无法通过这种方式重新启用输入字段，当我尝试单击它时，它不会从按钮中删除禁用属性。
有人可以告诉我为什么会发生这种情况，以及我需要做什么才能在字段为空时禁用每个输入并在字段为空时启用按钮。我是否需要像为旋转木马所做的那样添加一个计数器，以便它知道要重新启用哪个输入字段？
在此先感谢您的帮助。如果您需要更多信息，请告诉我。
const previousButton = document.querySelector("#previousButton");
const nextButton = document.querySelector("#nextButton");
const slideContainer = document.querySelector(".slides");
const slide = document.querySelector(".slide");
const slides = slideContainer.children;
const greeting = document.querySelectorAll(".greeting");
const firstName = document.querySelector(".firstname");
const lastName = document.querySelector(".lastname");
const inputs = document.querySelectorAll("input");
const connectAccBtn = document.querySelector(".connectAccount");
console.log(inputs.forEach((item) => item.value));
let currentSlide = 0;
//****sliding info*****
const handleChanges = () => {
currentSlide === slides.length - 2 ?
(nextButton.remove(), previousButton.remove()) :
(nextButton.style.opacity = 1);
currentSlide > 0 && currentSlide < slides.length - 2 ?
(previousButton.style.opacity = 1) :
(previousButton.style.opacity = 0);
slideContainer.style.marginLeft = `-${currentSlide}00vw`;
};
const previousSlide = () => {
if (currentSlide > 0) {
currentSlide -= 1; //could also use --
handleChanges();
}
};
const nextSlide = () => {
if (slides[currentSlide + 1]) {
currentSlide += 1; //could also use ++
handleChanges();
}
};
// ****main**********
const budgetScreen = () => {
greeting.forEach((item) => (item.innerHTML = `hello ${firstName.value}`));
};
budgetScreen();
previousButton.addEventListener("click", previousSlide);
nextButton.addEventListener("click", nextSlide);
firstName.addEventListener("change", budgetScreen);
connectAccBtn.addEventListener("click", budgetScreen);
nextButton.disabled = true;
inputs.forEach((input) =>
input.addEventListener("keyup", () => {
inputs.forEach((value) =>
value.value != "" ?
(nextButton.disabled = false) :
(nextButton.disabled = true)
);
})
);
* {
box-sizing: border-box;
}
body {
background: #EBECF0;
font-family: sans-serif;
margin: 0;
}
a {
color: inherit;
}
.wrapper {
/* stops the slide show scrolling */
overflow: hidden;
width: 100%;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
border-radius: 10px;
background: #EBECF0;
}
.buttons {
/* position: fixed; */
bottom: 1rem;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#previousButton {
opacity: 0;
}
.buttonButton {
margin: 1rem;
background: rgba( 4, 48, 114, 0.6);
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
backdrop-filter: blur( 4px);
-webkit-backdrop-filter: blur( 4px);
border-radius: 10px;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem 2rem;
color: white;
border-radius: 1rem;
cursor: pointer;
border: 1px solid rgba( 4, 48, 114, 0.6)
}
.slides {
transition: all 3s;
display: flex;
/* height:90vh; */
}
h3 {
color: #043072;
font-size: 30px;
}
h1 {
font-size: 50px;
}
.header {
display: flex;
justify-content: center;
align-items: center;
min-width: 100vw;
min-height: 25vw;
background: rgb(131, 58, 180);
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
}
select {
background: #EBECF0;
border: none;
border-top: 1px solid #043072;
padding: 25px 25px;
}
.connectAccount {
width: 300px;
background: rgba( 4, 48, 114, 0.6);
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
backdrop-filter: blur( 4px);
-webkit-backdrop-filter: blur( 4px);
padding: 1rem 2rem;
border-radius: 10px;
color: white;
outline: none;
border: 1px solid rgba( 4, 48, 114, 0.6);
}
input {
display: flex;
align-text: center;
border-radius: 5px;
border: none;
min-width: 250px;
padding: 25px 20px;
background: rgba( 255, 255, 255, 0.25);
box-shadow: 4px 2px 10px 0 rgba( 31, 38, 135, 0.37);
backdrop-filter: blur( 4px);
-webkit-backdrop-filter: blur( 4px);
}
.slide {
display: flex;
align-items: center;
flex-direction: column;
transition: all 5s ease-in-out;
background: #fff;
/* scroll-behavior: smooth; */
overflow: none;
}
#slide_1,
#slide_2,
#slide_3,
#slide_4,
#slide_5,
#slide_6 {
font-size: 3rem;
color: #fff;
font-weight: bold;
text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
background: #EBECF0;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="slides">
<div id="slide_2" class="slide">
<div class="header">
<h1>Affordable</h1>
</div>
<div class="content">
<h3>Tell us your first name</h3>
<input class="firstname inputField" type="text" name="first-name">
</div>
</div>
<div id="slide_3" class="slide">
<div class="header">
<h1>Affordable</h1>
</div>
<div class="content">
<h3>Tell us your Last name</h3>
<input class="inputField" type="text" name="lastname" value="">
</div>
</div>
<div id="slide_4" class="slide">
<div class="header">
<h1>Affordable</h1>
</div>
<div class="content">
<h3>Whats your Email Address</h3>
<input class="inputField" type="text" name="email" value="">
</div>
</div>
<div id="slide_5" class="slide">
<div class="header budgetPage">
<h1>Affordable</h1>
</div>
<h3 class="greeting">hello</h3>
<button class="connectAccount"><a href='#slide_6'>Connect Your Account</a></button>
</div>
<div id="slide_6" class="slide">
<div class="header budgetPage">
<h1>Affordable</h1>
</div>
<h3 class="greeting">Welcome</h3>
</div>
</div>
</div>
<div class="buttons">
<button id="previousButton" class="buttonButton" type="button">
Previous </button>
<button type="button" id="nextButton" class="buttonButton">Next</button>
</div>
<script src="budgetapp.js"></script>
</body>
</html>
有一些简单的方法可以测试您的项目伙伴！
我没有太多时间，但快速控制台调试显示：
ReferenceError: activeSlide is not defined
（第 36 行）
另外，这是从真正的快速浏览来看，看起来像这里：
inputs.forEach((input) =>
input.addEventListener("keyup", () => {
inputs.forEach((value) =>
value.value != ""
? (nextButton.disabled = false)
: (nextButton.disabled = true)
);
})
);
你正在检查 每个 输入是否为空（你还忘记了 { 开头的箭头函数并结束）。如果这不是你的目标，我可能会建议：
inputs.forEach((input) => {
input.addEventListener("keyup", function () {
this.value != ""
? (nextButton.disabled = false)
: (nextButton.disabled = true);
})
});
请注意我是如何将箭头函数更改为允许您使用 this 的匿名函数的。在箭头函数中，如果您尝试使用 this 您将获得 window 对象，而现在您将获得刚刚将事件监听器绑定到的输入字段（例如： console.log(this) 就在 input.value != "" 的正上方，return 现在将是一个名为 "firstname" 的输入对象，而不是 window 对象）。
首先，如果这个问题被反复询问，我深表歉意。
我已经搜索过，但我找不到适合我的情况的普通 javascript 答案。
我正在挑战并构建了一个带有 2 个按钮的 slider/carousel 类型的应用程序，一个用于下一张幻灯片，一个用于上一张幻灯片。
一些幻灯片（div）有输入字段，我想添加一个条件，如果任何输入字段为空，则应禁用 'next' 按钮。
我已经在输入字段上设置了一个 'input' eventListener 并尝试如下遍历输入字段。
nextButton.disabled = true;
inputs.forEach((input) =>
input.addEventListener("keyup", () => {
inputs.forEach((value) =>
value.value != ""
? (nextButton.disabled = false)
: (nextButton.disabled = true)
);
})
);
但是，我无法让它正常工作。我无法通过这种方式重新启用输入字段，当我尝试单击它时，它不会从按钮中删除禁用属性。
有人可以告诉我为什么会发生这种情况，以及我需要做什么才能在字段为空时禁用每个输入并在字段为空时启用按钮。我是否需要像为旋转木马所做的那样添加一个计数器，以便它知道要重新启用哪个输入字段？
在此先感谢您的帮助。如果您需要更多信息，请告诉我。
const previousButton = document.querySelector("#previousButton");
const nextButton = document.querySelector("#nextButton");
const slideContainer = document.querySelector(".slides");
const slide = document.querySelector(".slide");
const slides = slideContainer.children;
const greeting = document.querySelectorAll(".greeting");
const firstName = document.querySelector(".firstname");
const lastName = document.querySelector(".lastname");
const inputs = document.querySelectorAll("input");
const connectAccBtn = document.querySelector(".connectAccount");
console.log(inputs.forEach((item) => item.value));
let currentSlide = 0;
//****sliding info*****
const handleChanges = () => {
currentSlide === slides.length - 2 ?
(nextButton.remove(), previousButton.remove()) :
(nextButton.style.opacity = 1);
currentSlide > 0 && currentSlide < slides.length - 2 ?
(previousButton.style.opacity = 1) :
(previousButton.style.opacity = 0);
slideContainer.style.marginLeft = `-${currentSlide}00vw`;
};
const previousSlide = () => {
if (currentSlide > 0) {
currentSlide -= 1; //could also use --
handleChanges();
}
};
const nextSlide = () => {
if (slides[currentSlide + 1]) {
currentSlide += 1; //could also use ++
handleChanges();
}
};
// ****main**********
const budgetScreen = () => {
greeting.forEach((item) => (item.innerHTML = `hello ${firstName.value}`));
};
budgetScreen();
previousButton.addEventListener("click", previousSlide);
nextButton.addEventListener("click", nextSlide);
firstName.addEventListener("change", budgetScreen);
connectAccBtn.addEventListener("click", budgetScreen);
nextButton.disabled = true;
inputs.forEach((input) =>
input.addEventListener("keyup", () => {
inputs.forEach((value) =>
value.value != "" ?
(nextButton.disabled = false) :
(nextButton.disabled = true)
);
})
);
* {
box-sizing: border-box;
}
body {
background: #EBECF0;
font-family: sans-serif;
margin: 0;
}
a {
color: inherit;
}
.wrapper {
/* stops the slide show scrolling */
overflow: hidden;
width: 100%;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
border-radius: 10px;
background: #EBECF0;
}
.buttons {
/* position: fixed; */
bottom: 1rem;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#previousButton {
opacity: 0;
}
.buttonButton {
margin: 1rem;
background: rgba( 4, 48, 114, 0.6);
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
backdrop-filter: blur( 4px);
-webkit-backdrop-filter: blur( 4px);
border-radius: 10px;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem 2rem;
color: white;
border-radius: 1rem;
cursor: pointer;
border: 1px solid rgba( 4, 48, 114, 0.6)
}
.slides {
transition: all 3s;
display: flex;
/* height:90vh; */
}
h3 {
color: #043072;
font-size: 30px;
}
h1 {
font-size: 50px;
}
.header {
display: flex;
justify-content: center;
align-items: center;
min-width: 100vw;
min-height: 25vw;
background: rgb(131, 58, 180);
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
}
select {
background: #EBECF0;
border: none;
border-top: 1px solid #043072;
padding: 25px 25px;
}
.connectAccount {
width: 300px;
background: rgba( 4, 48, 114, 0.6);
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
backdrop-filter: blur( 4px);
-webkit-backdrop-filter: blur( 4px);
padding: 1rem 2rem;
border-radius: 10px;
color: white;
outline: none;
border: 1px solid rgba( 4, 48, 114, 0.6);
}
input {
display: flex;
align-text: center;
border-radius: 5px;
border: none;
min-width: 250px;
padding: 25px 20px;
background: rgba( 255, 255, 255, 0.25);
box-shadow: 4px 2px 10px 0 rgba( 31, 38, 135, 0.37);
backdrop-filter: blur( 4px);
-webkit-backdrop-filter: blur( 4px);
}
.slide {
display: flex;
align-items: center;
flex-direction: column;
transition: all 5s ease-in-out;
background: #fff;
/* scroll-behavior: smooth; */
overflow: none;
}
#slide_1,
#slide_2,
#slide_3,
#slide_4,
#slide_5,
#slide_6 {
font-size: 3rem;
color: #fff;
font-weight: bold;
text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
background: #EBECF0;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="slides">
<div id="slide_2" class="slide">
<div class="header">
<h1>Affordable</h1>
</div>
<div class="content">
<h3>Tell us your first name</h3>
<input class="firstname inputField" type="text" name="first-name">
</div>
</div>
<div id="slide_3" class="slide">
<div class="header">
<h1>Affordable</h1>
</div>
<div class="content">
<h3>Tell us your Last name</h3>
<input class="inputField" type="text" name="lastname" value="">
</div>
</div>
<div id="slide_4" class="slide">
<div class="header">
<h1>Affordable</h1>
</div>
<div class="content">
<h3>Whats your Email Address</h3>
<input class="inputField" type="text" name="email" value="">
</div>
</div>
<div id="slide_5" class="slide">
<div class="header budgetPage">
<h1>Affordable</h1>
</div>
<h3 class="greeting">hello</h3>
<button class="connectAccount"><a href='#slide_6'>Connect Your Account</a></button>
</div>
<div id="slide_6" class="slide">
<div class="header budgetPage">
<h1>Affordable</h1>
</div>
<h3 class="greeting">Welcome</h3>
</div>
</div>
</div>
<div class="buttons">
<button id="previousButton" class="buttonButton" type="button">
Previous </button>
<button type="button" id="nextButton" class="buttonButton">Next</button>
</div>
<script src="budgetapp.js"></script>
</body>
</html>
有一些简单的方法可以测试您的项目伙伴！ 我没有太多时间，但快速控制台调试显示：
ReferenceError: activeSlide is not defined
（第 36 行）
另外，这是从真正的快速浏览来看，看起来像这里：
inputs.forEach((input) =>
input.addEventListener("keyup", () => {
inputs.forEach((value) =>
value.value != ""
? (nextButton.disabled = false)
: (nextButton.disabled = true)
);
})
);
你正在检查 每个 输入是否为空（你还忘记了 { 开头的箭头函数并结束）。如果这不是你的目标，我可能会建议：
inputs.forEach((input) => {
input.addEventListener("keyup", function () {
this.value != ""
? (nextButton.disabled = false)
: (nextButton.disabled = true);
})
});
请注意我是如何将箭头函数更改为允许您使用 this 的匿名函数的。在箭头函数中，如果您尝试使用 this 您将获得 window 对象，而现在您将获得刚刚将事件监听器绑定到的输入字段（例如： console.log(this) 就在 input.value != "" 的正上方，return 现在将是一个名为 "firstname" 的输入对象，而不是 window 对象）。