Why doesn’t the console return anything?

Asked

Viewed 35 times

-2

Hello, I’m creating a pro Chrome extension to activate some functions via checkbox. As an example for testing, I put that if the result was true, I would have to show checked in the console.log, the same for if it were false (unchecked). For some reason the code doesn’t work.

Follow the code below.

document.addEventListener('DOMContentLoaded', function(){

document.getElementById('onoff').addEventListener('click', function(){
        function verificarCheckBox1() {
    var check = document.getElementById('onoff');
        for (var i=0;i<check.length;i++){ 
            if (check[i].checked == true){ 
                console.log('Checked')
            }  else {
      console.log('UnChecked')
            }
        }
        }
    
    function verificarCheckBox2() {
    var check = document.getElementById('onoff2');
        for (var i=0;i<check.length;i++){ 
            if (check[i].checked == true){ 
                console.log('Checked')
            }  else {
      console.log('UnChecked')
            }
        }
        }    
    
    })
    }
    )
body {
    width: 300px;
    height: 200px;
    background-color: #422256;
}

.toggle {
    margin-bottom: 40px;
}

.toggle > input {
    display: none;
}

.toggle > label {
    position: relative;
    display: block;
    height: 20px;
    width: 44px;
    background: #898989;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.toggle > label:after {
    position: absolute;
    left: -2px;
    top: -3px;
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
    content: '';
    transition: all 0.3s ease;
}
.toggle > label:active:after {
    transform: scale(1.15, 0.85);
}
.toggle > input:checked ~ label {
    background: #6fbeb5;
}
.toggle > input:checked ~ label:after {
    left: 20px;
    background: #179588;
}
.toggle > input:disabled ~ label {
    background: #d5d5d5;
    pointer-events: none;
}
.toggle > input:disabled ~ label:after {
    background: #bcbdbc;
}
<html>
    <head>
        <title>Auto Refresh - Linx</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
<body>
    <div class="toggle">
    <input id="onoff" type="checkbox">
  <label for="onoff"></label>
    </div>
  
  <div class="toggle">
    <input id="onoff2" type="checkbox">
  <label for="onoff2"></label>
    </div>
</body>
</html>

javascript function checkbox google-chrome-extension

1 answer

3


There are some points that need to be seen:

  • You are assigning the event click only at the first checkbox:
document.getElementById('onoff').addEventListener('click', function(){
  • You use the method getElementById, that returns only one element, but makes a for in the same, this is usually done when we use methods such as getElementsByClassName, that returns several elements:
var check = document.getElementById('onoff');
for (var i=0;i<check.length;i++){
  • Finally, your event only declares two functions and does not call them:
function verificarCheckBox1() {
function verificarCheckBox2() {

This can all be done in several different ways, below an example, where I create the function checked which only makes the verification of the checkbox:

function checked(checkbox) {
  if (checkbox.target.checked){ 
    console.log('Checked');
  } else {
    console.log('UnChecked');
  }
}

Note: I receive as parameter the event, then to access the element, I use the property target and finally, I check the property checked, as she is a Boolean, I don’t need to buy with true.

Now I can simply add the click event and use this function for both checkbox:

document.getElementById('onoff').addEventListener('click', checked);
document.getElementById('onoff2').addEventListener('click', checked);

See below for a full example:

document.addEventListener('DOMContentLoaded', function() {

  function checked(checkbox) {
    if (checkbox.target.checked){ 
      console.log('Checked');
    } else {
      console.log('UnChecked');
    }
  }

  document.getElementById('onoff').addEventListener('click', checked);
  document.getElementById('onoff2').addEventListener('click', checked);
});
body {
    width: 300px;
    height: 200px;
    background-color: #422256;
}

.toggle {
    margin-bottom: 40px;
}

.toggle > input {
    display: none;
}

.toggle > label {
    position: relative;
    display: block;
    height: 20px;
    width: 44px;
    background: #898989;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.toggle > label:after {
    position: absolute;
    left: -2px;
    top: -3px;
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
    content: '';
    transition: all 0.3s ease;
}
.toggle > label:active:after {
    transform: scale(1.15, 0.85);
}
.toggle > input:checked ~ label {
    background: #6fbeb5;
}
.toggle > input:checked ~ label:after {
    left: 20px;
    background: #179588;
}
.toggle > input:disabled ~ label {
    background: #d5d5d5;
    pointer-events: none;
}
.toggle > input:disabled ~ label:after {
    background: #bcbdbc;
}
<html>
  <head>
    <title>Auto Refresh - Linx</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
<body>
  <div class="toggle">
  <input id="onoff" type="checkbox">
  <label for="onoff"></label>
  </div>
  
  <div class="toggle">
    <input id="onoff2" type="checkbox">
    <label for="onoff2"></label>
  </div>
</body>
</html>

  • Amazing! The way you explained each part separately and then showed in practice how it works is awesome! Thank you very much.

Browser other questions tagged javascript function checkbox google-chrome-extension

You are not signed in. Login or sign up in order to post.