JavaScript onClick Funktion funktioniert nicht im FF

[Stud@Work]

Hey Leute,

ich habe eine Seite gebaut, die wunderbar im IE, auf Android, Opera, Opera Mobile etc. läuft:

document.write("<input type='button' name='MES00" + anlage + "' value='MES00" + anlage + "' onClick='javascript:switchAnsicht(this.name)'>");

Aber im FF beim Click auf einen Button tut sich überhaupt nichts? woran kann das liegen? JavaScript ist aktiviert! fnde auch sonst keine passenden Lösungsansatz.

Ein weiteres Problem ist, das der Windows Phone 7 Browser gedrost mein mobiles Stylesheet ignoriert und das für PCs verwendet:

		<link href="pc.css" rel="stylesheet" type="text/css" media="screen"/>  
		  
		<link href="sm.css" rel="stylesheet" type="text/css" media="handheld"/>  
		  
		<link href="sm.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)"/>

Kann mir da jemand weiterhelfen?
Danke.
Gruß

[Gunnar Bittersmann]

@@Stud@Work:

nuqneH

document.write("<input type='button' name='MES00" + anlage + "' value='MES00" + anlage + "' onClick='javascript:switchAnsicht(this.name)'>");

Warum verwendest du document.write() anstatt innerHTML oder DOM-Methoden?

Und was hat 'javascript:' in @onclick zu suchen? Nichts.

Aber im FF beim Click auf einen Button tut sich überhaupt nichts? woran kann das liegen? JavaScript ist aktiviert! fnde auch sonst keine passenden Lösungsansatz.

Ohne dein JavaScript zu kennen, wird wohl auch niemand sonst einen passenden Lösungsansatz fnden.

Ein weiteres Problem ist, das der Windows Phone 7 Browser gedrost mein mobiles Stylesheet ignoriert und das für PCs verwendet:

Der passende Lösungsansatz dafür heißt „mobile first“.

Das heißt: Die Styles für schmale Viewports sind Default. Für breitere Viewports werden andere Styles per min-device-width-Media-Queries gesetzt (progressive enhancement).

Qapla'

[Stud@Work]

function switchAnsicht(anlage) {  
  
	  //Ansicht 1 ist Status-Ansicht  
	  //Ansicht 0 ist Detail-Ansicht  
	  
	  //1 == Status-Ansicht  
	  if (ansicht == 1) {  
		document.all.links.style.display = "block";  
		document.all.rechtsoben.style.display = "none";  
		document.all.rechtsmitte1.style.display = "none";  
		document.all.rechtsmitte2.style.display = "none";  
		document.all.rechtsunten.style.display = "none";  
  
		ansicht = 0;  
	  }  
	  
	  //0 == Detail-Ansicht  
	  else {  
		document.all.links.style.display = "block";  
		  
		function fuehrendeNull(wert) {  
			if (wert<10) return "0" + parseInt(wert);  
			else return parseInt(wert);  
		}  
		  
		var zeit = new Date();  
		document.all.rechtsoben.style.display = "block";  
		document.getElementById("rechtsoben").innerHTML = "<h2>Anlage [" + anlage  
		+ "]  Stand " + fuehrendeNull(zeit.getHours()) + ":" + fuehrendeNull(zeit.getMinutes()) + ":" + fuehrendeNull(zeit.getSeconds()) + "</h2>";  
		  
  
		document.all.rechtsmitte1.style.display = "block";  
		document.all.rechtsmitte2.style.display = "block";  
		document.all.rechtsunten.style.display = "block";  
		  
		  
		  
		  if (browser == 1) {  
				//browser == 1  
				//Detail-Ansicht für mobile Geräte  
				//erstellt 4 buttons für Detail-Auswahl  
  
				document.getElementById("rechtsunten").innerHTML = "<br>"  
				+ "<input type='button' name='std' value='Status' onClick='javascript:back()'>"  
				+ "<input type='button' name='ref' value='Refresh' onClick='javascript:refresh()'>"  
				+ "<input type='button' name='los' value='Lose' onClick='javascript:lossicht()'>"  
				+ "<input type='button' name='pro' value='Prozesse' onClick='javascript:prozesssicht()'>";  
				  
				document.all.links.style.display = "none";  
				  
				document.all.rechtsoben.style.height = "10%";  
				document.all.rechtsmitte1.style.height = "40%";  
				document.all.rechtsmitte2.style.height = "40%";  
				document.all.rechtsunten.style.height = "10%";  
  
		  }  
		  
		  //browser == 0  
		  //Detail-Ansicht für Desktop-Geräte  
		  //Erstellt Status- und Refresh-button  
		  else {  
				document.getElementById("rechtsunten").innerHTML = "<br>"  
				+ "<input type='button' id='std' name='std' value='Status' onClick='javascript:back()'>"  
				+ "<input type='button' id='ref' name='ref' value='Refresh' onClick='javascript:refresh();'>";  
		  }  
  
		  ansicht = 1;  
	  }  
  
}

das ist der JavaScript Code der Funktion, wie gesagt alle anderen browser reagieren ordentlich auf den button-click.

zum Thema stylesheets, ich habe die verschiedenen stylesheets nicht aufeinander aufbauend erstellt, sondern für jeden fall ein komplett eigenes, da die darstellung komplett verschiedenen ist.
aus einem bildschirm werden auf dem mobilen gerät 4 verschiedene bildschirme...

das hat bisher auch ganz gut funktioniert. allerdings sucht sich der windows phone browser das desktop-stylesheet und über die browserkennung und meinen javascript code die richtige mobile aufteilung.

[Vinzenz Mai]

Hallo,

» function switchAnsicht(anlage) {  

> 	  //1 == Status-Ansicht  
> 	  if (ansicht == 1) {  
> 		document.all.links.style.display = "block";  
> 		document.all.rechtsoben.style.display = "none";  
> 		document.all.rechtsmitte1.style.display = "none";  
> 		document.all.rechtsmitte2.style.display = "none";  
> 		document.all.rechtsunten.style.display = "none";  
>   
> 		ansicht = 0;  
> 	  }  

das hat bisher auch ganz gut funktioniert.

ich bin erstaunt, dass solcher Code in anderen Browsern als dem IE (und Derivaten) "funktioniert". Dass das in Firefox nicht funktioniert, ist *nicht* verwunderlich.

Warum nutzt Du document.all überhaupt? Du kennst doch document.getElementById() ...

Zusatzfrage: Warum übergibst Du Deine Statusvariable "browser" nicht ebenfalls als Funktionsparameter - genauso wie Du es mit "anlage" machst?

Freundliche Grüße

Vinzenz

[Stud@Work]

Warum nutzt Du document.all überhaupt? Du kennst doch document.getElementById() ...

ja habe document.all aus meinem code verbannt und es funktioniert. Danke.
ich bin kein richtiger software-entwickler, deshalb hat nicht alles einen grund bei mir :)
dachte das ältere IE versionen das document.all benötigen.

Zusatzfrage: Warum übergibst Du Deine Statusvariable "browser" nicht ebenfalls als Funktionsparameter - genauso wie Du es mit "anlage" machst?

ja die variable könnte ich auch mit übergeben, stimmt schon...

aber warum der visual studio windows phone emulator sich immer das desktop-stylesheet greift, weiss ich auch nicht.

Opera Mobile for Windows greift sich das korrekte Stylesheet?!

		  
		<link href="pc.css" rel="stylesheet" type="text/css" media="screen"/>  
  
        <link rel="stylesheet" type="text/css" href="sm.css" media="screen and (max-device-width: 480px)" />  
  
        <link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="sm.css" type="text/css" rel="stylesheet" />

[Klawischnigg]

Hi there,

ich bin erstaunt, dass solcher Code in anderen Browsern als dem IE (und Derivaten) "funktioniert". Dass das in Firefox nicht funktioniert, ist *nicht* verwunderlich.

document.all funktioniert mittlerweile in fast allen Browsern. Lediglich eine Abfrage auf die Existenz von document.all gibt aus Kompatibiliätsgründen bei allen Browsern ausser dem IE ein "false" zurück. Was natürlich trotzdem nichts daran ändert, daß man diesen Mist nirgendwo braucht und auch nicht verwenden sollte...