Almontas Almontas - 5 months ago 46
HTML Question

Javascript: Cannot read property 'style' of null on Else

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: "4B4T220TQF43NIUKJAQI1DNASEOI12NBTTUNZ5YOETDDQORF",
clientSecret: "YDBCTHJECBNMQVFWRC1GU5RFGGPHRY4Y1VGHSVD4PLMGRKNB",
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-->

Answer

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.