+ 1

No Undefined javascript

Every time I try to change the style in javascript it either says I cannot change the property of an undefined variable or null or something like that. here's an example that I want to make the login div visible after clicking on the span1() div but it won't work. what am I doing wrong? Html: <!DOCTYPE html> <html> <head> </head> <body class="body"> <div id="headbar"> <div class="span" onclick="span1()">IUL</div> <div class="span" onclick="span2()">Term</div> <div class="span" onclick="span3()">TaxB</div> <div class="span" onclick="span4()">TOS</div> </div> <div class="login"></div> </body> </html> CSS: .body { background: linear-gradient(130deg,#00f9c3,#00edf9); padding-left: 20px; padding-right: 20px; color:white; font-family: sans-serif; padding:0px 100px 0px 100px; } #headbar { width:100%; height:100px; background-color: azure; border-radius:5px; text-align: center; } .span { background: linear-gradient(130deg,#00f9c3,#00edf9); border-radius:5px; width:100px; height:80px; vertical-align: middle; margin-top: 10px; display:inline-block; } .login { height:300px; width:200px; background-color: white; visibility:hidden; position:absolute; top:200px; right:300px; } JavaScript: function span1(){ document.getElementsByClassName('login').style.visibility="visible"; } Please Help! What am I doing wrong?

javascript dom undefined null

14th Mar 2018, 5:19 PM

Jordan S Reynolds

1 Respuesta

+ 3

getElementsByClassName() return an array-like object list of elements, wich have no 'style' property ^^ In your specific example case, you can access the <div> element as the first item of this array-like list: function span1(){ document.getElementsByClassName('login')[0].style.visibility="visible"; }

14th Mar 2018, 5:34 PM

visph