First of all I apologise if this question has been asked over and over.
I have searched but I cannot find the answer in vanilla javascript for my scenario.
I am doing a challenge and have built a slider/carousel type app with 2 buttons, one for next slide and one for previous slide.
Some of the slides(divs) have input fields and I want to add a condition that if any of the input fields are empty then the 'next' button should be disabled.
I've set up an 'input' eventListener on the input fields and tried looping over the input fields as below.
nextButton.disabled = true;
inputs.forEach((input) =>
input.addEventListener("keyup", () => {
inputs.forEach((value) =>
value.value != ""
? (nextButton.disabled = false)
: (nextButton.disabled = true)
);
})
);
However, I just can't get it to work properly. I can't get the input field to re-enable this way and when I try to click on it it doesn't remove the disabled attribute from the button.
Could someone let me know why this might be happening and what I need to do to get it to disabled each input when the field is empty and enable the button when not. Do I need to add a counter like I did for the carousel, so it know which input field to re-enable?.
Thanks in advance for any help. Let me know if you need anymore info.
HTML
<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>
Javascript
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 activeSlideElement = document.querySelector(".active.slide");
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[activeSlide + 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)
);
})
);
Aucun commentaire:
Enregistrer un commentaire