Almontas Almontas - 1 year ago 109
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 = {
redirectUrl: ""

if (access_token === 0) {

document.getElementById('dashboardProfile').style.display == 'none';
document.getElementById('dashboardInfo').style.display == 'none';

$('.connect').click(function () {

var url = "";
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.

<div class="container">
<div class="header">
<div class="logo"><img src = "images/foursquare-logo.png">


<div class="dashboard-container">

<div class="dashboardConnect">
<div class="connect"><p> Sign In </p>


<div class="dashboardProfile">
<p>User Information and Picture</p>

<div class="dashboardInfo">
<p>Check Ins </p>
<div class="indicator checkin"> # </div>

<div class="indicator country"> # </div>

<div class="indicator city"> # </div>





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.