まず第一に、この質問が何度も聞かれた場合はお詫び申し上げます。
検索しましたが、シナリオのバニラJavaScriptで答えが見つかりません。
私はチャレンジを行っており、次のスライド用と前のスライド用の2つのボタンを備えたスライダー/カルーセルタイプのアプリを作成しました。
一部のスライド（div）には入力フィールドがあり、入力フィールドのいずれかが空の場合は「次へ」ボタンを無効にするという条件を追加したいと思います。
入力フィールドに「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が定義されていません
（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);
})
});
矢印関数を、これを使用できる匿名関数に変更した方法に注目してください。矢印関数でこれを使用しようとすると、ウィンドウオブジェクトが取得されますが、イベントリスナーをバインドしたばかりの入力フィールドが取得されます（例：input.valueのすぐ上にあるconsole.log（this）！= " "は、ウィンドウオブジェクトではなく、" firstname "という名前の入力オブジェクトを返すようになりました）。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加