-1

So i'm trying to change the margin of my h1 heading in the following snippet of code, using JavaScript for accuracy and because CSS does not support the auto property for the h1 margin. To do this, I am adding a margin using the document. object. I would use more advanced JavaScript to divide the width of the window in half and position the h1 heading there, however if such a simple code like this:

document.getElementsByTagName("h1")[0].style.marginLeft = "500px";

doesn't work then what is the point? Can anyone explain to me why this does not work and give me a suitable resolve to the issue? Thanks in advance.

UPDATE

It seems that the code decides to work when it is called in a function but not when it left out on its own. Any help to why?

Huzaifah Farooq
  • 54
  • 1
  • 7
  • My first thought is to do `h1 { display: inline-block; margin: auto }`, but if you want to center it, just do `text-align:center` – inorganik Dec 17 '15 at 23:09
  • wrap the `500px` in quotes in your JS example. – Marc Dec 17 '15 at 23:10
  • Ah, I did text-align:center and it achieved the results I wanted. I believed it did not work, but it turned out I had made the most foolish mistake of spelling "center" wrong. Despite this, I still don't understand why the JavaScript example above did not work. In fact, it seems that no style edit with JavaScript works for some reason, and I can't see any syntax errors in my work. – Huzaifah Farooq Dec 18 '15 at 00:03

1 Answers1

2

You have to put the 500px measurement in quotes like this:

document.getElementById("qwert").style.marginLeft = "500px";

If you explain your larger problem, it may be that this can be solved entirely with CSS too and not have to use JS for it.

Now, that you've entirely changed what you're asking in your question (which you are NOT supposed to do here), I'll try to address the new question you're asking.

If the code only works when called in a function, then you either have a syntax error or a timing error. My guess would be that when the code is not in a function, you are executing it too early before the DOM elements have been parsed and are present.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • My larger problem would be that i want to center the h1 tag. I did try the above but once again, it did not work. I could link the entire code if necessary? – Huzaifah Farooq Dec 17 '15 at 23:24
  • @HuzaifahFarooq - I don't know what CSS context your document may have, but in a simple document, this is all the CSS it takes to center text in an h1 tag: `h1 {text-align: center;}`. See demo [here](https://jsfiddle.net/jfriend00/c5vwm59L/). – jfriend00 Dec 17 '15 at 23:28
  • @HuzaifahFarooq - We probably don't want to see your entire code. This site asks you to distill down the problem to the smallest amount of code necessary to reproduce or illustrate your problem and to then paste that code into your question. You can include a reference to your full site, but that should not be the only reference to the relevant code. – jfriend00 Dec 17 '15 at 23:30
  • @HuzaifahFarooq - it's very frustrating for us when you edit your question and entirely change what you're now asking. That is NOT how this site is supposed to work. I attempted to add something to my answer to address your latest changes, but once we've answered what you originally asked and you then have a new problem, you should ask a new question. This is not supposed to be a running dialog here. You ask one question, get an answer and go on. If you have more follow-on questions, you ask new questions. – jfriend00 Dec 17 '15 at 23:32
  • Text-align has already been centered, that is not what I am trying to achieve. I am trying to centre the text in the middle of my window, not in the middle of my actual h1. – Huzaifah Farooq Dec 17 '15 at 23:54
  • Sorry about that, but I felt the other question wasn't actually a follow on question really. If the first question is answered correctly then the second one will to. However, the problem is that the first one has not been answered. No matter how I phrase the code, where I put it and what I do to it, it only seems to work if a button is pressed to change it. Nothing else. – Huzaifah Farooq Dec 17 '15 at 23:58
  • @HuzaifahFarooq - I give up here. You aren't showing us your actual situation (relevant HTML, CSS, etc... in a reproducible circumstance) so all we can do is guess and I've offered my guesses. – jfriend00 Dec 18 '15 at 00:00
  • I can still show you sections of relevant HTML and CSS if you want? I have managed to center it, however styling with JavaScript seems to not work for some reason. – Huzaifah Farooq Dec 18 '15 at 00:09
  • Ah. Reading your edited comment I now understand what I did wrong. I was calling the function before all of the DOM elements were present, so the function did not recognize the element that I wished to change the style of. Thanks for the help! – Huzaifah Farooq Dec 22 '15 at 14:55