Issue
i am trying to disable if the input is not up to certain numbers of later, where the input class =viewbox, and the button =btn-next i have tried to make it up but it's not working, any working solution will be so much appreciated.
let viewBox = document.querySelector(".viewbox");
let btnNext = document.querySelector(".btn-next");
btnNext.disabled = true;
viewBox.addEventListener("change", stateHandle);
function stateHandle() {
if (document.querySelector(".viewbox").value === "5") {
btnNext.disabled = true;
} else {
btnNext.disabled = false;
}
}
Solution
You need to change the event listner from change to input as change will not show the realtime changes, below is the working code for your problem,
I have changed the input colors for your better understanding.
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color: red;">Hello World!</h1>
<p>This is a paragraph.</p>
<input type="text" placeholder="view port" class="viewbox"/>
<input type="button" placeholder="btn next" class="btn-next"/>
<script>
let viewBox = document.querySelector(".viewbox");
let btnNext = document.querySelector(".btn-next");
btnNext.disabled = true;
viewBox.addEventListener("input", ()=>stateHandle());
function stateHandle() {
if (document.querySelector(".viewbox").value.length <= 5) {
btnNext.style.backgroundColor = "blue";
btnNext.disabled = true;
} else {
btnNext.style.background = "red";
btnNext.disabled = false;
}
}
</script>
</body>
</html>
Answered By - Muhammad Farhan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.