Javascript: Cannot read property 'style' of null on Else
Question
The error message: Cannot read property 'style' of null shows up on the first statement of my "else" statement. Not sure where I am going wrong. Any thoughts?
$(document).ready(function () {
var foursquareApi = {
clientId: "CLIENT_ID",
clientSecret: "CLIENT_SECRET",
redirectUrl: "http://almontas.github.io/FourSquareJax/"
}
if (access_token === 0) {
document.getElementById('dashboardProfile').style.display == 'none';
document.getElementById('dashboardInfo').style.display == 'none';
$('.connect').click(function () {
var url = "https://foursquare.com/oauth2/access_token";
url += "?client_id=" + foursquareApi.clientId;
url += "&response_type=token";
url += "&redirect_uri=" + foursquareApi.redirectUrl;
window.location = url;
});
} else {
document.getElementById('dashboardProfile').style.display == 'block'; //this lines gives an error message.
document.getElementById('dashboardInfo').style.display == 'block';
}
Here is some of the HTML in question. The .dashboardProfile and .dashboardInfo seem to be in place as mentioned by comments.
<body>
<div class="container">
<div class="header">
<div class="logo"><img src = "images/foursquare-logo.png">
</div>
</div>
<div class="dashboard-container">
<div class="dashboardConnect">
<div class="connect"><p> Sign In </p>
</div>
</div>
<div class="dashboardProfile">
<p>User Information and Picture</p>
</div>
<div class="dashboardInfo">
<p>Check Ins </p>
<div class="indicator checkin"> # </div>
<p>Countries</p>
<div class="indicator country"> # </div>
<p>Cities</p>
<div class="indicator city"> # </div>
</div>
</div>
</div><!--container-fluid-->
5 answers
solution1
3 ACCPTED 2014-06-27 15:52:35
You don't have an element with the ID dashboardProfile , you have an element with the class dashboardProfile .
So you do:
document.getElementsByClassName('dashboardProfile')[0].style.display = "none"
Same goes for your other document.getElementById , you don't have any elements with IDs in your HTML.
solution2
1 2016-06-13 15:45:08
You can do it this way with jquery it's easier
$('.dashboardProfile').css("display","block"); $('.dashboardInfo').css("display","block");
solution3
0 2014-06-27 15:16:18
1) make sure you have a element with id dashboardProfile beacause you getting error like
'Cannot read property 'style' of null'
2) if you assign value to element you should use single =
document.getElementById('dashboardProfile').style.display = 'block';
== is a comparison operator so, you cannot assign value using ==
solution4
0 2014-06-27 16:18:12
You cannot access the property style of dashboardProfile if it is not present. Check its presence by :
if ( document.getElementById('dashboardProfile') !== null ) {
document.getElementById('dashboardProfile').style.display = 'block';
}
Also , for assigning a value, use = and for comparison use == or === .
solution5
0 2014-06-27 17:26:15
You're trying to use getElementById() to find an element by its class name, and that simply does not work. It looks like you can just change the HTML:
<div id="dashboardProfile">
<p>User Information and Picture</p>
</div>
<div id="dashboardInfo">
<p>Check Ins </p>
...
Also note the other answer: you're trying to update the style with the wrong JavaScript operator.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.