Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: JS ongelma ->getElementById

Sivun loppuun

Paulus M [18.09.2009 02:20:08]

#

Eli firebugin heittä virhe ilmoituksen, että kuva on null, vaikkei pitäisi

virheilmoitus:

kuva is null
muutaKuvanSijainti("jalat", "3,72%", "0%", "ala")testi.js (line 144)
piirraJasen(Object name=nro value=0)testi.js (line 186)
suoritaToiminta(Object name=nro value=0, Object name=delay value=0)testi.js (line 100)
suorita()testi.js (line 73)
testi.js()testi.js (line 401)
[Break on this error] kuva.style.left = x + ";";\r\n

Javascripti:

function muutaKuvanSijainti(kuvaId, x, y, ySuunta)
{
	var kuva = document.getElementById(kuvaId);
	kuva.style.left = x + ";";

	if(ySuunta == "ylos")
	{
		kuva.style.top = y +";";
	}

	if(ySuunta == "alas")
	{
		kuva.style.bottom = y +";";
	}


}

ja html tiedosto ja css(erillisenä tiedostona):

#jalat
{
	position:absolute;
	bottom: 0%;
	left: 0%;
	height: 20%;
}

..........


<div id = "aniOikealla"> 	<!--css pohja1 -->
<img id = "paa" src = "kuvat/ani/Eteen.png"></img>
<img id = "vartalo" src = "kuvat/tyhjakuva.png"></img>
<img id = "jalat" src= "kuvat/tyhjakuva.png"></img>
</div>

Minkä takia en saa muka poimittua tuota kuvaa, joka on id:llä "jalat".
Mun pitäisi siis muuttaa sen sijaintia, sörkkimällä css tiedostoon uudet
arvot.

tsuriga [18.09.2009 02:24:41]

#

Otapa välit pois noiden tagien attribuutteja ja niiden arvoja yhdistävien yhtäsuuruusmerkkien edestä ja takaa: id="paa", src="kuvat...".

Paulus M [18.09.2009 15:22:22]

#

Ei ilmeisesti vaikuta asiaan, tässä on nyt muokattu koodi:

<div id = "aniOikealla"> 	<!--css pohja1 -->
<img id="paa" src="kuvat/ani/Eteen.png"></img>
<img id="vartalo" src="kuvat/tyhjakuva.png"></img>
<img id="jalat" src="kuvat/tyhjakuva.png"></img>
</div>

Lebe80 [18.09.2009 15:36:18]

#

Onko DOM ehtinyt rakentua kun kutsut tuota muutaKuvanSijainti() -funktiota?

Metabolix [18.09.2009 16:01:15]

#

Vielä Lebe80:n kommentti yksinkertaistettuna: kutsutko funktiota window.onload-tapahtuman jälkeen (tai tapahtumankäsittelijässä)?

Paulus M [18.09.2009 16:08:25]

#

aivan, no eipä tosiaan ole - täytyypä ilmeisesti laittaa...kokeillaan.

EDIT:
no nyt laitoin function kutsun tällaisen tagin alle:
<body onload="ikkunaLadattu()">

firubugi heittää kuitenkin
vielä samaa virheilmoitusta:

kuva is null
muutaKuvanSijainti("jalat", "3,72%", "0%", "ala")testi.js (line 144)
piirraJasen(Object name=nro value=0)testi.js (line 186)
suoritaToiminta(Object name=nro value=0, Object name=delay value=0)testi.js (line 100)
suorita()testi.js (line 73)
ikkunaLadattu()testi.js (line 387)
function onload(event) { ikkunaLadattu(); }(load )1 (line 2)
[Break on this error] kuva.style.left = x + ";";\r\n

Paulus M [18.09.2009 17:23:48]

#

Ei vaan eipä heitäkkään enää tuota virhe ilmoitusta, koska toi firefox ei vaan päivittänyt js koodia vaan jostain syystä, vaikka tallensin jokaisen muutoksen jälkeen. Kun suljin tiedoston ja avasin uudestaan, niin homma toimi.

Kiitokset avusta Lebelle ja Metabolixelle.

Metabolix [18.09.2009 17:43:18]

#

Kun palvelin on muinoin ilmoittanut sen tiedoston yhteydessä jonkin päivämäärän, johon asti se on kelvollinen, selaimet eivät yleensä vaivaudu lataamaan sitä uudestaan ennen aikojaan. Fx päivittää tiedostot näppäinyhdistelmällä Ctrl-Shift-R.

Omalla testipalvelimella, kun netti ei ole rajoittava tekijä, on helppo ratkaisu säätää palvelimen asetuksista kaikille tiedostoille HTTP-otsikko "Cache-Control: no-cache". Toinen vaihtoehto (tuotannossa hyvä) on vaihtaa JS-tiedoston GET-parametria aina, kun se päivittyy. Parametrilla ei ole mitään merkitystä palvelimen tai JS:n toiminnan kannalta, mutta selain tunnistaa esimerkiksi osoitteet koodi.js?1 ja koodi.js?2 erillisiksi. Jos riittää kärsivällisyyttä viritellä, voi vaikka säätää automaattisesti tiedoston viimeisen muokkausajankohdan tuohon parametriksi. Hatusta vedettynä homma toimisi suunnilleen näin:

<?php
function include_js($js) {
  $ver = filemtime($js);
  $js = htmlspecialchars($js);
  echo "<script type='text/javascript' src='$js?$ver'></script>\n";
}
?>
<html>
<head>
<title>Testi</title>
<?php
include_js('koodi.js');
include_js('toinen.js');
?>
</head>
...
</html>

Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta