Udskrive innerHTML vha JavaScript i FF.

hvad er det du gerne vil lave?
Hvis det er et slideshow har jeg et der virker her:

script language="JavaScript1.1">
var slidespeed=1000

//specify images
var slideimages=new Array("images/Slideshow/frontpage/1.jpg","images/Slideshow/frontpage/2.jpg","images/Slideshow/frontpage/3.jpg","images/Slideshow/frontpage/4.jpg","images/Slideshow/frontpage/5.jpg","images/Slideshow/frontpage/6.jpg","images/Slideshow/frontpage/7.jpg","images/Slideshow/frontpage/8.jpg")

//specify corresponding links
var slidelinks=new Array("http://www.dynamicdrive.com","http://javascriptkit.com","http://www.geocities.com")

var newwindow=1 //open links in new window? 1=yes, 0=no

var imageholder=new Array()
var ie=document.all
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow(){
if (newwindow)
window.open(slidelinks[whichlink])
else
window.location=slidelinks[whichlink]
}

//-->
</script>

I din HTML skal du så skrive:

<a href="java script:gotoshow()"><img src="images/Slideshow/frontpage/1.jpg" name="slide" border=0 style="filter:blendTrans(duration=3)" /></a>

<script language="JavaScript1.1">
<!--

var whichlink=0
var whichimage=0
var blenddelay=(ie)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+blenddelay)
}
slideit()

//-->
</script>

Husk at ændre stien til de anvendte billeder i første del.

Jeg skal ikke have et slideshow. Jeg skal blot have hjælp til at ændre følgende kode:

var objBottomNavSlideshowTekst = document.createElement("SPAN");
objBottomNavSlideshowTekst.setAttribute('id','Slideshow');
objBottomNavSlideshowTekst.setAttribute('innerHTML','<SPAN class=lblink>Slideshow: <B>Stoppet</B></SPAN></SPAN>');
objBottomNavSlideshow.appendChild(objBottomNavSlideshowTekst);

Således at den i IE og firefox udskriver føglende:
<DIV id=bottomNav><A id=SlideshowLink href="#"><SPAN id=Slideshow><SPAN class=lblink>Slideshow: <B>Stoppet</B></SPAN></SPAN></A>

Når du alligevel bruger DOM, bør du slet ikke involvere innerHTML.

var objBottomNavSlideshowTekst = document.createElement("span");
  objBottomNavSlideshowTekst.setAttribute('id','Slideshow');
    var objBottomNavSlideshowTekst2 = document.createElement("span");
    objBottomNavSlideshowTekst2.setAttribute("className","lblink");
      var objBottomNavSlideshowTekst3 = document.createTextNode("Slideshow: stoppet");
      objBottomNavSlideshowTekst2.appendChild(objBottomNavSlideshowTekst3);
  objBottomNavSlideshowTekst.appendChild(objBottomNavslideshowTekst);
objBottomNavSlideshow.appendChild(objBottomNavSlideshowTekst);

Kan jeg ikke gøre det vha innerHTML? Det gør det nemlig nemmere for mig at opdater den information jeg har udskrevet idet jeg så kan bruge:

document.getElementById("Slideshow").innerHTML = Slideshow_Stop;

I virkeligheden ser min DOM kode også sådan ud:
objBottomNavSlideshowTekst.setAttribute('innerHTML',Slideshow_Tekst_Start);

Ja, men innerHTML er ikke inkluderet i nogen standard og bør generelt undgåes. DOM er den korrekte metode, så mit forslag må nok være, at du strukturerer din DOM-kode bedst muligt, så du let kan rette i den.

Eksempelvis kunne du lave en funktion til at indsætte DOM-TextNoder, så du bare skulle kalde den sådan her f.eks.: InsertTextNode("Slideshow: stoppet",objBottomNavSlideshowTekst);

hvor objBottom.. er det element, det skal indsættes i.

Ok, så lad mig forsøge at ændre min DOM-kode. Jeg har prøvet med din kode men den virker ikke. Har ændret den lidt til:

var objBottomNavSlideshowTekst = document.createElement("SPAN");
objBottomNavSlideshowTekst.setAttribute('id','Slideshow');
var objBottomNavSlideshowTekst2 = document.createElement("SPAN");
objBottomNavSlideshowTekst2.setAttribute("className","lblink");
var objBottomNavSlideshowTekst3 = document.createTextNode("Test");
objBottomNavSlideshowTekst2.appendChild(objBottomNavSlideshowTekst3);
objBottomNavSlideshowTekst.appendChild(objBottomNavslideshowTekst2);
objBottomNavSlideshow.appendChild(objBottomNavSlideshowTekst);

Ups ... "Test" skal erstattes med Slideshow_Tekst_Start

Hvad virker ikke?

<ole>

Du kan heller ikke bruge set/getAttribute til CSS-klasser. IE kræver, du bruger 'className', mens FF bruger 'class'. Enten må du sætte dem begge, eller du må bruge den gamle form: ELEMENT.className = "noget"

/mvh
</bole>

Ah ja:

var objBottomNavSlideshowTekst = document.createElement("SPAN");
objBottomNavSlideshowTekst.setAttribute('id','Slideshow');
var objBottomNavSlideshowTekst2 = document.createElement("SPAN");
objBottomNavSlideshowTekst2.className="lblink";
var objBottomNavSlideshowTekst3 = document.createTextNode("Test");
objBottomNavSlideshowTekst2.appendChild(objBottomNavSlideshowTekst3);
objBottomNavSlideshowTekst.appendChild(objBottomNavslideshowTekst2);
objBottomNavSlideshow.appendChild(objBottomNavSlideshowTekst);

Det virker heller ikke :-(

Ok... Nu er "virker ikke" jo et ret vidt begreb. Hvad sker der, når du kører koden?

Intet ;-)

Jeg bruger koden i sammenhæng med en lightbox (http://www.huddletogether.com/projects/lightbox/) og når bruger ovenstående kode får jeg slet ikke en lightbox frem når jeg trykker på et billed.

Eftersom at følgende virker fint:
var objBottomNavSlideshowTekst = document.createElement("SPAN");
objBottomNavSlideshowTekst.setAttribute('id','Slideshow');
objBottomNavSlideshowTekst.setAttribute("className","lblink");
objBottomNavSlideshow.appendChild(objBottomNavSlideshowTekst);

Tyder det på at fejlen ligger i følgende:
var objBottomNavSlideshowTekst2 = document.createTextNode(Slideshow_Tekst_Start);
objBottomNavSlideshowTekst.appendChild(objBottomNavslideshowTekst2);

Jeg får faktisk en javascript fejl men det er temmelig ubrugelig:
Linie 1, Tegn 1, Fejl: 'myLightbox' er ikke defineret, Kode: 0

Hmmm.. Den burde du jo så egentlig også få under alle omstændigheder.. Og den betyder, at du aldrig var'er mylightBox, så det burde du jo nok :)

Er du 100% sikker på, Slideshow_Tekst_Start indeholder noget?

Du kan i øvrigt spare en linje ved at skrive:

objBottomNavSlideshowTekst.appendChild(document.createTextNode(Slideshow_Tekst_Start));

Det betyder, at du ikke har en variable, der hedder 'myLightbox', når du kalder scriptet - eller at variablen ikke indeholder noget. Den fejl er i allerhøjeste grad anvendelig  :)

Men er det så ikke underligt at koden virke hvis jeg unlader at inkluder de nye 2 linier? Min erfaring siger mig at det betyder at der er en fejl med de 2 linier der betyder at koden ikke bliver udført korrekt hvorfor der så i dette tilfælde ikke bliver defineret myLightbox.

I kan se hele js koden her, måske det kan hjælpe:
www.key2wellness.dk/lightbox.js

Det er linie 240 til 245 som jeg arbejder med.

Og sætter jeg en alert("Start"); og alert("Slut"); ind på hver side af 240 og 245 så får jeg kun en popup med Start. Det betyder jo at koden går i stå i de linie der ligger imellem og det må derfor være i de følgende 2 linier der er noget galt:

var objBottomNavSlideshowTekst2 = document.createTextNode(Slideshow_Tekst_Start);
objBottomNavSlideshowTekst.appendChild(objBottomNavslideshowTekst2);

prøv
objBottomNavSlideshowTekst.appendChild(document.createTextNode(Slideshow_Tekst_Start));



(i din kode står der "objBottomNavslideshowTekst2" - bemærk at "slideshow" har et lille begyndelsesbogstav i modsætning til variablens egentlige navn.)

Super, det hjalp! Kan du også hjælpe med det sidste lille problem? Mit link bliver nu udskrevet som:
<A id=SlideshowLink href="#"><span class="lblink" classname="lblink" id="Slideshow">Slideshow: <b>Stoppet</b></span></A>

Og jeg har defineret min css som:
<style type="text/css">
A { text-decoration:none }
A:hover { text-decoration:underline }
.lblink { TEXT-DECORATION: none; FONT-SIZE: 11px; COLOR: #333333; FONT-FAMILY: Arial, Helvetica, sans-serif }
</style>

Linket vises med den rigtige style men i Firefox får jeg en blå streg under ved mouseover og i IE får jeg slet ikke noget. Hvad skal jeg gøre for at få en streg under i begge browser og få den i den farve der er defineret i lblink?

Prøv at slette TEXT-DECORATION: none; i din lblink-klasse

Nu får jeg også stregen i IE men den er også blå som i FF. Hvordan får jeg den til at have den farve jeg har defineret i min lblink?

Du sætter blot:
a { color:#333333 }

Ja, men så bliver alle mine link den farve, og det er ikke meningen! Det er derfor jeg har lavet en lblink.

Classen skal være på linket så for at virke. Altså <a class="lblink"...

Ahh ... så blev jeg også det klogere! Mange tak for hjælpen. Smid et svar og du skal få dine velfortjente point!

Takker! =)