Archief - JS: InnerHtml

Flipkikker · 27 okt 2004

llo,
prob noob vraag maar ja:
hoe kan ik ervoor zorgen dat de inhoud van een <p> tag gewijzigd wordt met javascript?
ik heb het al geprobeerd met innerhtml, maar ws foute code gebruikt:

Code:

<script>
function changejuw( furl, descr )
{
foto.src = furl;
beschrijving.innerhtml = descr;
}
</script>

...

<a href="#" onclick="changejuw('foto1.jpg','beschrijving')">klik hier om de foto te veranderen en de beschrijving weer te geven</a>
<p id="beschrijving" class="uitleg">deze tekst wordt gewijzigd</p>
<img id="foto" src="">

EDIT: en blijkbaar heb ik nog problemen:
in Mozilla FireFox wordt verandert de afbeelding niet wanneer er op de link geklikt wordt

Flipkikker · 27 okt 2004

om het jullie wat gemakkelijker te maken heb ik nog een testpagina gemaakt:
http://puutjuwelen.hollosite.com/test.htm
in IE verandert de foto en als de alt ook, de beschrijving verandert niet
in FF verandert de foto blijkbaar toch, de beschrijving verandert niet

hoe moet ik de beschrijving, die in de <p> staat veranderen met javascript?

Spacy2003 · 27 okt 2004

Hier is je oplossing:

Code:

<html>
<head>
<script>
function changejuw( furl, descr )
{
foto.src = furl;
foto.alt = descr;
document.getElementById('beschrijving').innerHTML = descr;
}
</script>
<title>Test</title>
</head>
<body>
<img id="foto" src="images/smJuweel0.jpg" alt="Juweel0">
<p id="beschrijving">hier komt de beschrijving</p>
<a href="#" onclick="changejuw('images/smJuweel1.jpg','Juweel1')">klik hier om de afbeelding en de uitleg te veranderen</a>
</body>
</html>

grtz

//edit firefox doet idd ZEER raar ik zou dat toch eens nazien

EryciusPuteanus · 27 okt 2004

Is innerHTML trouwens geen IE only functie?

Spacy2003 · 27 okt 2004

EryciusPuteanus zei:
Is innerHTML trouwens geen IE only functie?

Ja want FF flipt helemaal :crazy:

ene keer zette ie als je klikt de description dan weer de image echt weird

Flipkikker · 27 okt 2004

hmm thx,
ik wel multi browser compatibele code nodig zonder dat ik daarvoor extra controles moet inbouwen
is er nog een andere manier die wel voor alle browsers werkt om dit op te lossen?

Flipkikker · 27 okt 2004

net een ideetje, zou dit niet lukken met een <span> ?

Dece · 27 okt 2004

ooit ook eens dat probleem gehad: InnerHtml is idd IE only

Spacy2003 · 27 okt 2004

Dece zei:
ooit ook eens dat probleem gehad: InnerHtml is idd IE only

het begint moeilijker te worden als je innerhtml niet mag gebruiken, damn IE hun eigen taaltje :help:

Ontopic: Ik zal ook blijven zoeken flipkikker

Flipkikker · 28 okt 2004

ty,
kdenk dat dit trouwens voor anderen ook handig kan zijn, <span> is btw IE only en verouderd

Dece · 28 okt 2004

eurghhmmmmm
bij mijn weet ondersteund iedere recente browser span :wtf:

dJeez · 28 okt 2004

Dece zei:
ooit ook eens dat probleem gehad: InnerHtml is idd IE only

Euhm, zowel Mozilla/Firefox als Netscape kennen innerHTML sinds lang, maar outerHTML niet

.

Er bestaan echter voldoende functies (die je makkelijk kan terugvinden via Google) die je kan gebruiken om de inhoud via DOM op te gaan halen (maw DOM compliant alternatieven voor innerHTML).

BTW Let wel op de CaSe SeNsItIvItY.

Spacy2003 · 28 okt 2004

dJeez zei:
Euhm, zowel Mozilla/Firefox als Netscape kennen innerHTML sinds lang, maar outerHTML niet .

Er bestaan echter voldoende functies (die je makkelijk kan terugvinden via Google) die je kan gebruiken om de inhoud via DOM op te gaan halen (maw DOM compliant alternatieven voor innerHTML).

Heb het idd ook door maar waarom reageerd de functie dan zo raar ??

want met alleen de 'prijs' in dit voorbeeld te veranderen met innerHtml werkt het idd wel

dJeez · 28 okt 2004

Spacy2003 zei:
Heb het idd ook door maar waarom reageerd de functie dan zo raar ??

Omdat je de afbeeldingen niet preload bijvoorbeeld... En je kan beter alles via DOM doen maw de foto niet wijzigen via directe toegang (op ID) maar ook via DOM ophalen en dan wijzigen.

Firefox komt dat laatste trouwens mooi zeggen (in de Javascript console):

Warning: Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.

Spacy2003 · 28 okt 2004

dJeez zei:
Omdat je de afbeeldingen niet preload bijvoorbeeld... En je kan beter alles via DOM doen maw de foto niet wijzigen via directe toegang (op ID) maar ook via DOM ophalen en dan wijzigen.

Firefox komt dat laatste trouwens mooi zeggen (in de Javascript console):

thnx heb ik zo ook al wat bijgeleerd

hier is je oplossing flipkikker:

Code:

<html>
<head>
<script>
function changejuw( furl, descr )
{
document.getElementById('foto').src = furl;
document.getElementById('foto').alt = descr;
document.getElementById('beschrijving').innerHTML = descr;
}
</script>
<title>Test</title>
</head>
<body>
<img id="foto" src="images/smJuweel0.jpg" alt="Juweel0">
<p id="beschrijving">hier komt de beschrijving</p>
<a href="#" onclick="changejuw('images/smJuweel1.jpg','Juweel1')">klik hier om de afbeelding en de uitleg te veranderen</a>
</body>
</html>

//edit werkt precies tog nog niet naar behoren

dJeez · 28 okt 2004

Spacy2003 zei:
//edit werkt precies tog nog niet naar behoren

Da's dan wellicht omdat je nog steeds de images niet preload.

Voeg volgende wijziging toe :

Code:

function preloadImages()
{
	img = new Image();
	img.src = "images/smJuweel0.jpg";
	img = new Image();
	img.src = "images/smJuweel1.jpg";
}

window.onload = preloadImages();

Archief - JS: InnerHtml

Flipkikker

Legacy Member

Flipkikker

Legacy Member

Spacy2003

Legacy Member

EryciusPuteanus

Legacy Member

Spacy2003

Legacy Member

Flipkikker

Legacy Member

Flipkikker

Legacy Member

Dece

Legacy Member

Spacy2003

Legacy Member

Flipkikker

Legacy Member

Dece

Legacy Member

dJeez

Legacy Member

Spacy2003

Legacy Member

dJeez

Legacy Member

Spacy2003

Legacy Member

dJeez

Legacy Member