Issue
I write this code and got the following result But there is a problem that if we remove the checkboxes and then click button, the results will not be updated! please help me for complete this program... Thanks :)
const inputs = document.querySelectorAll(".inputGroup input");
const icons = document.querySelectorAll(".icons i");
let btn = document.getElementById("btn");
btn.addEventListener("click", function (e) {
inputs.forEach(function (inputs) {
if (inputs.checked === true) {
icons.forEach(function(i){
if(inputs.dataset.id === i.getAttribute('class'))
{
i.style.display = 'block'
}
})
}
})
});
.icons i
{
display: none;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="inputGroup">
<input data-id="fa fa-user" type="checkbox" id="user">
<label for="user">user</label>
<input data-id="fa fa-tree" type="checkbox" id="tree">
<label for="tree">tree</label>
<input data-id="fa fa-lock" type="checkbox" id="lock">
<label for="fa fa-lock">lock</label>
<button id="btn">Button</button>
</div>
<div class="icons">
<i class="fa fa-user"></i>
<i class="fa fa-tree"></i>
<i class="fa fa-lock"></i>
</div>
<script src="./app.js"></script>
</body>
</html>Solution
The trick is to "undisplay" the icon if the checkbox is not checked. I changed some lines of your code to make it more readable (use the find array method):
const inputs = document.querySelectorAll(".inputGroup input");
// make icons an array to be able to use the .find() method on it
const icons = Array.from(document.querySelectorAll(".icons i"));
let btn = document.getElementById("btn");
btn.addEventListener("click", function(e) {
inputs.forEach(function(input) {
const inputId = input.dataset.id;
// find the associated icon to the input
const icon = icons.find(tmpicon => inputId === tmpicon.className);
// display the icon if the input is checked
if (input.checked) {
icon.style.display = "block";
}
// don't display it if the input isn't checked
else {
icon.style.display = "none";
}
});
});.icons i {
display: none;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body>
<div class="inputGroup">
<input data-id="fa fa-user" type="checkbox" id="user">
<label for="user">user</label>
<input data-id="fa fa-tree" type="checkbox" id="tree">
<label for="tree">tree</label>
<input data-id="fa fa-lock" type="checkbox" id="lock">
<label for="fa fa-lock">lock</label>
<button id="btn">Button</button>
</div>
<div class="icons">
<i class="fa fa-user"></i>
<i class="fa fa-tree"></i>
<i class="fa fa-lock"></i>
</div>
<script src="./app.js"></script>
</body>
</html>Answered By - Apollo79
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.