We have problem in a piece of JavaScript code

Question

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>

Apollo79 · Accepted Answer · 2022-10-23 14:38:17Z

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>

Remco Kersten · Accepted Answer · 2022-10-23 14:41:51Z

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 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>

KooiInc · Accepted Answer · 2022-10-23 15:44:15Z

Make sure to hide all icons first, and subsequently check for the ticked boxes.

But it's unnecessary if you use event delegation and handle clicks on the relevant checkboxes. In that case you don't need a button either. The handler can be very simple now:

document.addEventListener("click", handle);

function handle(evt) {
  if (evt.target.dataset.id) {
     document.querySelector(`i[class='${evt.target.dataset.id}']`)
       .style.display = evt.target.checked ? `block`: `none`;
  }
}

.icons i {
  display: none;
}

<link rel="stylesheet" 
  href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" 
  integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" 
  crossorigin="anonymous" 
  referrerpolicy="no-referrer"/>

<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>
</div>
<div class="icons">
  <i class="fa fa-user"></i>
  <i class="fa fa-tree"></i>
  <i class="fa fa-lock"></i>
</div>

Collectives™ on Stack Overflow

We have problem in a piece of JavaScript code

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related