Cannot set property 'display' of undefined when i use java script

Question

i trying to change css using java script but it did not work.

function myFunction() {
    var x = document.getElementsByClassName('chirag');
    var check = document.getElementById('chk1');

    for (var i=0;i<x.length;i+=1){
	  if(check.checked){
    	   x.style.display = 'none';
	        }
	         else {
	        x.style.display = 'block';
	    }
	}
}

.chirag{
			display: none;
		}

<input type="checkbox"  id="chk1" value="Plate" onclick="myFunction()"> Plate  <br> 

<div id="plan_detail" class="chirag">
</div>

i try to add javascript function on checkbox event. how can i fix it and change the css property

x is a list of elements, not an element itself. Maybe you meant x[i].style.display ? — Jared Smith
– Jared Smith, Commented Oct 11, 2017 at 13:03

Alex · Accepted Answer · 2017-10-11 13:10:08Z

2

You were missing the "i" on the for cycle:

function myFunction() {
    var x = document.getElementsByClassName('chirag');
    var check = document.getElementById('chk1');

    for (var i=0;i<x.length;i+=1){
	  if(!check.checked){
    	x[i].style.display = 'none';
	  } else {
	    x[i].style.display = 'block';
	  }
	}
}

.chirag{
			display: none;
		}

<input type="checkbox"  id="chk1" value="Plate" onclick="myFunction()"> Plate  <br> 

<div id="plan_detail" class="chirag">
   test
</div>

answered Oct 11, 2017 at 13:10

Alex

1581 gold badge1 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user7983224 · Accepted Answer · 2017-10-11 13:10:12Z

2

You have to include the integer "i" of the loop as index of the array of elements "x"

function myFunction() {
    var x = document.getElementsByClassName('chirag');
    var check = document.getElementById('chk1');

    for (var i=0;i<x.length;i+=1){
	  if(check.checked){
    	   x[i].style.display = 'none';
	        }
	         else {
	        x[i].style.display = 'block';
	    }
	}
}

.chirag{
			display: none;
		}

<input type="checkbox"  id="chk1" value="Plate" onclick="myFunction()"> Plate  <br> 

<div id="plan_detail" class="chirag">
</div>

answered Oct 11, 2017 at 13:10

user7983224

Comments

Ehsan · Accepted Answer · 2017-10-11 13:26:15Z

javascript:

You miss i index:

function myFunction() {
    var x = document.getElementsByClassName('chirag');
    var check = document.getElementById('chk1');
    for (var i=0;i<x.length;i+=1) {
        if(check.checked)
           x[i].style.display = 'block';
        else 
            x[i].style.display = 'none';
    }
}

function myFunction() {
    var x = document.getElementsByClassName('chirag');
    var check = document.getElementById('chk1');
    for (var i=0;i<x.length;i+=1) {
        if(check.checked)
           x[i].style.display = 'block';
        else 
            x[i].style.display = 'none';
    }
}

.chirag {
    display: none;
}

<input type="checkbox"  id="chk1" value="Plate" onclick="myFunction()"> Plate  <br> 

<div id="plan_detail" class="chirag">
   Hello
</div>

With jquery:

$(document).ready(function(){
    $('#chk1').click(function(){
        $('.chirag').toggle();
    })
})

.chirag {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<input type="checkbox"  id="chk1" value="Plate"> Plate  <br> 

<div id="plan_detail" class="chirag">
   Hello
</div>

Collectives™ on Stack Overflow

Cannot set property 'display' of undefined when i use java script

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