We have problem in a piece of JavaScript code-CodePudding

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 >
        <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 >
        <i ></i>
        <i ></i>
        <i ></i>
    </div>
    <script src="./app.js"></script>
</body>

</html>

CodePudding user response：

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 >
    <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 >
    <i ></i>
    <i ></i>
    <i ></i>
  </div>
  <script src="./app.js"></script>
</body>

</html>

CodePudding user response：

The moment a checkbox is checked, you add the style display: block.

But you don't remove this when the checkbox is no longer checked. That is why the relevant icon remains visible.

I've modified your code slightly. The moment you press the button, a display property is applied / adjusted per icon based on the relevant checkbox.

If the checkbox is selected, the display will get the value block, if the checkbox is not selected, the value will be none. I do this using a ternary operator.

i.style.display = inputs.checked === true ? 'block' : 'none'

Of course there are more options, but the point is that you adjust the style again when a checkbox is disabled. An added style doesn't just go away (unless you refresh your browser)

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) {
         icons.forEach(function(i){
             if(inputs.dataset.id === i.getAttribute('class'))
             {
             i.style.display = inputs.checked === true ? 'block' : '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 >
        <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 >
        <i ></i>
        <i ></i>
        <i ></i>
    </div>
    <script src="./app.js"></script>
</body>

</html>