CSS Uncaught TypeError: Cannot read property 'setAttribute' of null

Question

i am trying to give margin-top:10px to id download-csv

Here is html and javascrpit:

<span style="display: inline;"  id="download-csv"><input type="submit"   id="csv_download"  value="Download"></span>;



JavaScript :
         var download_csv=document.getElementById("download-csv");
if(count_layer==1)
        download_csv.setAttribute("style","margin-top:10px");
}else{
       download_csv.setAttribute("style","margin-top:20px");

}

Its throws error TypeError: Cannot read property 'setAttribute' of null

gurvinder372 · Accepted Answer · 2017-10-19 09:21:17Z

4

You need to ensure that markup is loaded before those elements are accessed by the JS code.

Also, you cannot give margins to inline elements, set display style property as display-inline.

var download_csv = document.getElementById("download-csv");
var count_layer = 1;
if (count_layer == 1) {
  download_csv.style.marginTop = "10px";
} else {
  download_csv.style.marginTop = "50px";
}

<span style="display: inline-block;" id="download-csv">
   <input type="submit"   id="csv_download"  value="Download">
</span>

answered Oct 19, 2017 at 9:21

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

Comments

Md. Abu Sayed · Accepted Answer · 2017-10-19 09:38:30Z

2

You can try this code :

if(count_layer==1)
        download_csv.style.marginTop = "10px";
}else{
       download_csv.style.marginTop = "20px";
}

edited Oct 19, 2017 at 9:38

answered Oct 19, 2017 at 9:21

Md. Abu Sayed

2,5363 gold badges21 silver badges30 bronze badges

3 Comments

Md. Abu Sayed Over a year ago

sorry to write double time style.style it is the only style one style try this again, please.

Mohammad Ahmad Shabbir Over a year ago

Sir i wrote this one but Same error download_csv.style.marginTop = "10px";

Mohammad Ahmad Shabbir Over a year ago

Welll Thanks Sir

Mario Rawady · Accepted Answer · 2017-10-19 09:23:22Z

1

Now your javascript code is being executed before the page loads, thus the <html>attribute won't be loaded yet, and then you will get the error.

To fix it, put your javascript code inside $(document).ready

$(document).ready(function() {
    //Your code goes here
}) ;

answered Oct 19, 2017 at 9:23

Mario Rawady

8717 silver badges17 bronze badges

2 Comments

dr_leevsey Over a year ago

Not sure if this guy is using jquery

Mohammad Ahmad Shabbir Over a year ago

Mostly JavaScript

Collectives™ on Stack Overflow

CSS Uncaught TypeError: Cannot read property 'setAttribute' of null

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related