CODEWITHSUNDEEP
javascript
TopPop
TopPop

Reputation: 1

hide / show div on checkbox click

hello i was just trying to hide / show div's on checkbox click i have tried the code / script below but it didn't work ? i was also wondering if there is a easier way to do it?

function checkBox1() {    
  var checkBox = document.getElementById("myCheck1");
    var text = document.getElementsByClassName("shop");
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
       text.style.display = "none";
    }
}

function checkBox2() {    
  var checkBox = document.getElementById("myCheck2");
    var text = document.getElementsByClassName("party");
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
       text.style.display = "none";
    }
}

function checkBox3() {    
  var checkBox = document.getElementById("myCheck3");
    var text = document.getElementById("dailyquests");
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
       text.style.display = "none";
    }
}
<center>| Shop: <input type="checkbox" id="myCheck1" onclick="checkBox1()" checked> | Party: <input type="checkbox" id="myCheck2" onclick="checkBox2()" checked> | Dailyquests: <input type="checkbox" id="myCheck3" onclick="checkBox3()" checked> |</center>
<br>
<br>
<div class="shop">TEXT HERE</div>
<br>
<div class="party">TEXT HERE</div>
<br>
<div class="dailyquests">TEXT HERE</div>

sorry if my english is not good

Upvotes: 0

Views: 540

Answers (4)

Surabhi K
Surabhi K

Reputation: 144

So getElementsByClassName returns a collection of items, you would need to choose the index - 

function checkBox1() {    
  var checkBox = document.getElementById("myCheck1");
  var text = document.getElementsByClassName("shop");
  if (checkBox.checked){
    text[0].style.display = "block";
  } else {
   text[0].style.display = "none";
  }
}

Upvotes: 0

brk
brk

Reputation: 50346

This is because document.getElementsByClassName returns a collection & you need to pass the index to get the element.

Having said that you can modify the javascript and have only one function to do the work of displaying and hiding.

For example <input type="checkbox" id="myCheck1" onclick="toggleDisplay(this.id,'shop')" checked on click will call a toggleDisplay function and the id is passed using this.id.IntoggleDisplay(this.id,'shop')` the second parameter is the class name

function toggleDisplay(elemId, className) {
  if (document.getElementById(elemId).checked) {
    document.getElementsByClassName(className)[0].style.display = "block"
  } else {
    document.getElementsByClassName(className)[0].style.display = "none"
  }
}
<center>| Shop: <input type="checkbox" id="myCheck1" onclick="toggleDisplay(this.id,'shop')" checked> | Party: <input type="checkbox" id="myCheck2" onclick="toggleDisplay(this.id,'party')" checked> | Dailyquests: <input type="checkbox" id="myCheck3" onclick="toggleDisplay(this.id,'dailyquests')"
    checked> |
</center>
<br>
<br>
<div class="shop">TEXT HERE</div>
<br>
<div class="party">TEXT HERE</div>
<br>
<div class="dailyquests">TEXT HERE</div>

Upvotes: 0

Leo
Leo

Reputation: 680

Document.getElementsByClassName() returns an array-like object of all child elements which have all of the given class names.

change this:

document.getElementsByClassName("shop");
document.getElementsByClassName("party");
document.getElementsByClassName("dailyquests");

to:

document.getElementsByClassName("shop")[0];
document.getElementsByClassName("party")[0];
document.getElementsByClassName("dailyquests")[0];

to take the first element with that class

Ps.

In the third function you have to use 'document.getElementsByClassName' and not 'document.getElementById', because 'dailyquests' is a class, not an id

Demo: jsfiddle

Upvotes: 0

Mustapha Larhrouch
Mustapha Larhrouch

Reputation: 3403

document.getElementsByClassName return a list of elements. the text object is in the first element :

function checkBox1() {    
  var checkBox = document.getElementById("myCheck1");
    var text = document.getElementsByClassName("shop")[0];
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
       text.style.display = "none";
    }
}

function checkBox2() {    
  var checkBox = document.getElementById("myCheck2");
    var text = document.getElementsByClassName("party")[0];
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
       text.style.display = "none";
    }
}

function checkBox3() {    
  var checkBox = document.getElementById("myCheck3");
    var text = document.getElementsByClassName("dailyquests")[0];
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
       text.style.display = "none";
    }
}
<center>| Shop: <input type="checkbox" id="myCheck1" onclick="checkBox1()" checked> | Party: <input type="checkbox" id="myCheck2" onclick="checkBox2()" checked> | Dailyquests: <input type="checkbox" id="myCheck3" onclick="checkBox3()" checked> |</center>
<br>
<br>
<div class="shop">TEXT HERE</div>
<br>
<div class="party">TEXT HERE</div>
<br>
<div class="dailyquests">TEXT HERE</div>

Upvotes: 1

Related Questions