Program nie działa przez <!Doctype html>

0

Cześć Wam!
Stworzyłem prostą stronkę z latającym obrazkiem.
Nie działała. Ku mojemu zdziwieniu gdy usunąłem znacznik <!DOCTYPE html> wszystko zaczęło działać jak należy (obrazek zaczął latać).
Myślałem że ten tag to "pozycja obowiązkowa"... Czemu tak się stało?

<html>
      <head>
            <script>

                  var the_timer, x_position=0, the_image;

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

            </script>
      </head>
<body>
    <form>
         <input type="button" onClick="set_timer()" value="Dajesz">
    </form>
         <img src="blinken.png" style="position: absolute; left:0" id="mir">
</body>
</html>
0

nie wiem jak tam cała strona wygląda, a spróbuj umieścić script w body, a nie head

0

Umieściłem script w body. Nic to nie zmieniło. Dalej działa tylko bez <!DOCTYPE html>

0

Obstawiam, że dodanie tego doctype powoduje wymuszenie case sensitive dla nazw atrybutów - spróbuj zamienić onClick na onclick.

2

Pytanie raczej dlaczego to działa bez doctype ;)
Do pozycji obrazka nie dodajesz jednostki, nie ma prawa to działać

powinno być

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

czyli doctype html uratowało ci skórę, bo pokazało błąd (bo kod działał przez przypadek, jak widać). Trochę jak "use strict" w JavaScript (też warto stosować, bo pokazuje ci błędy w JS, których byś nie miał. Podobnie jak let i const zamiast var pokaże ci błąd, jak będziesz próbował kilka razy zadeklarować tę samą zmienną).

0

onclick to zło . . .

0

Zdecydowanie przyłączam się do przedmówców.
Doctype sprawił że przestało działać to co zostało błędnie napisane, w Twoim wypadku funkcja była wywoływana - wystarczyło wstawić jakiś console.log.
Problem tkwi w tym jak przesuwasz element "mir - mianowicie

function set_timer() {
            console.log('script2'); // widać że funkcja działa niezależnie od tego czy jest DOCTYPE czy nie 
            the_image = document.getElementById("mir");
            x_position++; // warto się oswoić z tym zapisem
            the_image.style.left = x_position + 'px';  // kluczowe jest tutaj dodanie stringu "px", gdyż zmienna x_position to int
            the_timer = setTimeout(set_timer, 50);
        }

1 użytkowników online, w tym zalogowanych: 0, gości: 1