Gå til innhold

Ingen javascripts fungerer!


Anbefalte innlegg

I det siste får jeg ingen av mine hjemmeskrevne javascripts til å fungere!!! Ikke engang copy&pasted kode får jeg til å fungere!!!

 

Her er et eksempel på et bittelite script.

<html>
<head>
	<script>
		function switch() {
			document.getElementById("replaceMe").innerHTML = "Nytt innhold";
		}
	</script>
</head>

<body>
	<div id="replaceMe">
		Gammelt innhold
	</div>

	<p>
		<a href="#" onclick="switch()">Bytt innhold</a>
	</p>
</body>
</html>

 

Den siden gir "Fullført, men feil på siden" status i IE.

 

Er det noe fundameltalt forferdelig feil jeg gjør?

Lenke til kommentar
Videoannonse
Annonse

ehm... I det forrige tilfellet viste det seg at switch ikke er et gyldig funksjonsnavn, da kodeordet "switch" har andre meninger i javascript.

 

Men likevell, hvorfor får jeg feilmeldingen "document.getElementById(...) er null eller ikke et objekt" i koden min, når jeg vet at <ul id="nav"> er et helt vanelig element?

 

<style type="text/css">
body {
text-align: center;
}

#nav, #nav ul {
list-style: none;

padding: 0;
margin: 0;

text-align: left;
}

#nav span {
display: block;

padding: 0;
margin: 0;
}

#nav li {
margin: 0;
padding: 0;

list-style: none;

float: left;

width: 125px;
}

#nav li ul {
display: none;
position: absolute;
width: 200px;

color: #fff;

padding: 10px;

background-color: #000;
opacity: 0.75;
filter:alpha(opacity=75);
}

#nav li:hover ul, .m ul {
display: block;
}

#wrapper {
margin: 0px auto;
width: 420px;
}
</style>

<script type="text/javascript">
function initializeList() {
alert("starting");

alert("gathering list elements to array");
var liList = document.getElementById("nav").getElementsByTagName("li"); 

alert("browsing through list elements");
for(var i = 0; i < liList.length; i++) {
	alert("list element nr " + i);
}
}

window.load = initializeList();
</script>

<div id="wrapper">
<ul id="nav">
	<li>
		<span>Fish</span>

		<ul>
			<li>Trout</li>
			<li>Pike</li>
			<li>Salmon</li>
			<li>Manta Ray</li>
		</ul>
	</li>

	<li>
		<span>Machines</span>

		<ul>
			<li>TV</li>
			<li>Microwave</li>
			<li>Computer</li>
			<li>Refridgerator</li>
		</ul>
	</li>

	<li>
		<span>Woodland creatures</span>

		<ul>
			<li>Rabbit</li>
			<li>Weasel</li>
			<li>Squirrel</li>
			<li>Mouse</li>
			<li>Rat</li>
		</ul>
	</li>
</ul>
</div>

Lenke til kommentar

Et eksempel som funker på IE (du må ha med return false; i onclick'en):

<html>
<head>
	<script>
		function ole() {
			document.getElementById("replaceMe").innerHTML = "Nytt innhold";
		}
	</script>
</head>
<body>
	<div id="replaceMe">
		Gammelt innhold
	</div>
	<p>
		<a href="#" onclick="ole();return false;">Bytt innhold</a>
	</p>
</body>
</html>

Lenke til kommentar
hvorfor returnerer

 

var liList = navDiv.getElementsByTagName("li");

 

null?

 

EDIT:

 

Dette eksempelet fungerer fint i firefox

 

<html>
 <head>
<title>Test</title>
<script type="application/x-javascript">
		function run()
		{
			var div = document.getElementById("truls");
			var liCollection = div.getElementsByTagName("li");
			alert(liCollection.length);
		}
</script>
 </head>

 <body onload="run()">
	<div id="truls">
		<li>1</li>
		<li>3</li>
		<li>2</li>
	</div>
 </body>
</html>

Endret av siDDIs
Lenke til kommentar

Inline script thread
Error:
name: TypeError
message: Statement on line 7: Cannot convert undefined or null to Object
Backtrace:
 Line 7 of inline#1 script in file://localhost/C:/Users/Dahwan/Desktop/html%20testing/index.html: In function initializeList
				var listItems = menu.getElementsByTagName("li");

 

!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?

Opera error console

 

 

WTF???

 

 

Koden ser helt ok ut spør du meg! Kan noe forklare hvorfor det ikke funker!?

Lenke til kommentar

Time etter time med debugging - endelig funnet kilden til faenskapen.

window.onLoad = ......();

 

Dette klikker tydeligvis siden scriptet kjøres i head-delen av siden. Siden body siden ikke ennå er lastet inn så klarer den ikke å kjøre initializeList (som ser etter elementer i body taggen)

Eller noe slikt x] Men det fungerer når jeg sletter den biten og heller legger inn <body onload="initializeList()">

 

Takk for hjelpa

Lenke til kommentar
  • 2 uker senere...

@dahwan: du har helt rett. all kode som forsøker å referere til deler av dokumentet som kommer etter koden må kalles etter at dokumentet er ferdig lastet. dette gjøres med onload. dette gjelder også definering av funksjoner selv om ikke selve funksjonen kalles opp før resten av dokumentet er lastet må fortsatt funksjonen defineres i onload.

 

window.onload = function() {
 // kode som krever ferdig lastet dokument.

}

 

@wubbable: dersom du installerer dragonfly får du tilgang til developer tools i opera, som blandt annet har en error console.

Lenke til kommentar

Ikke glem at når du sender med en funksjon som et argument, skal du ikke ha med parantereser. Da vil du faktisk kalle funksjonen.

 

Du skrev

window.load = initializeList();

.. mens det egentlig skal skrives slik.

window.load = initializeList;

 

Og det er derfor det funket da du plaserte funksjons-kallet i body's onload-attribute. (som for øvrig er en utrolig dårlig ting å gjøre)

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...