JavaScript not working with doctype html?

Question

I'm new to HTML, CSS and JavaScript, and I've stumbled upon a problem. This code should create a picture that's moving to the right over time, but it only works if I delete the doctype line of code. I've tried this code in the validator, it shows no errors, but it doesn't do what I want it to do unless I delete the doctype. What should I change here?

<!doctype html>
<html>
    <head>
        <title>Timer pomeranje</title>
        <script>
            var the_timer, x_position = 0, the_image;
            function set_timer() {
                the_image = document.getElementById("djuro_image");
                x_position = x_position + 1;
                the_image.style.left=x_position;
                the_timer = setTimeout(set_timer, 50);
            }
        </script>
    </head>
    <body onload = "set_timer()">
        <img src = "Djuro.png" id = "djuro_image" style = "position:absolute; left:0px" alt = "Djuro">
    </body>
</html>

you should not write your javascript in your head

gr3g
– gr3g

2015-10-18 20:40:15 +00:00
Commented Oct 18, 2015 at 20:40 — gr3g
– gr3g, Commented Oct 18, 2015 at 20:40
You'll have to tell which browser you're using.

JJJ
– JJJ

2015-10-18 20:41:39 +00:00
Commented Oct 18, 2015 at 20:41 — JJJ
– JJJ, Commented Oct 18, 2015 at 20:41

Mr Lister · Accepted Answer · 2015-10-18 20:58:25Z

6

In Quirks mode (without a DOCTYPE declaration), CSS sizes without units are allowed; they are interpreted as pixels.

In Standards mode (with a DOCTYPE), CSS lengths always need units.

So the solution is to add px to the position: the_image.style.left=x_position+'px';
Then it will work in both Standards and Quirks mode.

var the_timer, x_position = 0, the_image;

function set_timer() {
  the_image = document.getElementById("djuro_image");
  x_position = x_position + 1;
  the_image.style.left = x_position + 'px';
  the_timer = setTimeout(set_timer, 50);
}

set_timer();

<img src="Djuro.png" id="djuro_image" style="position:absolute; left:0px" alt="Djuro">

As a side note, using Quirks mode is never a good idea. In this particular case, most browsers share the same quirk (CSS size without a unit is treated as px) but that is not always the case!

edited Oct 18, 2015 at 20:58

answered Oct 18, 2015 at 20:43

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

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

1 Comment

Bokeh Over a year ago

Thank you very much for the explanation, it works now :)

Tobias Gassmann · Accepted Answer · 2015-10-18 20:46:23Z

0

You need to provide the unit, in your case 'px':

the_image.style.left=x_position + 'px';

here is the plunkr:

http://plnkr.co/edit/vyYUoItrw3S0eJyFa0wb?p=preview

answered Oct 18, 2015 at 20:46

Tobias Gassmann

11.9k18 gold badges62 silver badges97 bronze badges

Collectives™ on Stack Overflow

JavaScript not working with doctype html?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related