Unable To Change CSS JavaScript

Question

I just want to set display property of one of my div to block based on event, by default its 'none' Its not happening with error: Cannot set property 'display' of undefined Below is my code. Please suggest.

HTML

<!DOCTYPE html>
<html >
<head>
<meta charset="ISO-8859-1">
<title>Sample Mod Pop UP</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body class="body">


<div class="popUp" id="id1">
  <p>Are You Sure You Want to Quit?</p>
  <span>&#10006</span> 
</div>
<button onClick=closeWindown() class="btn">Close</button>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

JavaScript

function closeWindown(){

    document.getElementsByClassName("popUp").style.display="block";


}

adeneo · Accepted Answer · 2014-06-28 08:19:05Z

4

getElementsByClassName gets a nodeList, so you have to iterate

function closeWindown(){

    var elements = document.getElementsByClassName("popUp");

    for (var i=elements.length; i--;) {
        elements[i].style.display = "block";
    }

}

As a sidenote, querySelectorAll('.popup') has better support, but is non-live.

answered Jun 28, 2014 at 8:19

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

Collectives™ on Stack Overflow

Unable To Change CSS JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related