sauberes trennen von js-code zwischen browsern?
tomstig 20.01.2005 - 20:45 630 11
tomstig
OC Addicted
|
ich code gerade für die schule an einem rätselscript (zahl raten). script schaut so aus: <html>
<head>
<title>Raten</title>
<style type="text/css">
body, td{
font-size: 10pt;
font-family: Arial;
}
td.border{
border: 2px solid #000000;
}
.button{
border-top: 1px solid #cccccc;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #cccccc;
background-color: #ffffff;
}
</style>
<script type="text/javascript">
a = Math.round((Math.random()*100));
b = 0;
function rate(){
var zahl = document.getElementsByName('feld')[0].value;
if(zahl.length != 0){
b++;
if(document.getElementById || document.layers){
if(zahl == a){
document.getElementById('answer').style.backgroundColor = "green";
document.getElementById('answer').style.color = "white";
document.getElementById('answer').style.fontWeight = "bold";
document.getElementById('answer').firstChild.nodeValue = "Richtig!";
document.getElementById('button').disabled = true;
}else if(zahl < a ){
document.getElementById('answer').firstChild.nodeValue = "Die Zahl ist höher";
}else{
document.getElementById('answer').firstChild.nodeValue = "Die Zahl ist niedriger";
}
document.getElementById('versuche').firstChild.nodeValue = "<b>Anzahl der Versuche:</b> " + b + a;
}
if(document.all){
if(zahl == a){
document.getElementById('answer').style.backgroundColor = "green";
document.getElementById('answer').style.color = "white";
document.getElementById('answer').style.fontWeight = "bold";
document.getElementById('answer').innerText = "Richtig!";
document.getElementById('button').disabled = true;
//highscore(b);
}else if(zahl < a ){
document.getElementById('answer').innerText = "Die Zahl ist höher";
}else{
document.getElementById('answer').innerText = "Die Zahl ist niedriger";
}
document.getElementById('versuche').innerHTML = "<b>Anzahl der Versuche:</b> " + b + a;
}
}
}
/*
function show_highscore(){
if(!document.cookie)
else
return document.cookie;
}
function edit_highscore(score){
if(!document.cookie)
document.cookie = score;
else if(document.cookie > score)
document.cookie = score;
}
*/
</script>
</head>
<body>
<table align="center" width="200px">
<tr>
<td id="versuche" colspan="2" class="border">
<b>Anzahl der Versuche:</b> 0
</td>
</tr>
<tr>
<td id="highscore" colspan="2" class="border">
<b>Dein persönlicher Highscore:</b> -
</td>
</tr>
<tr>
<td id="answer" colspan="2" style="text-align: center" class="border">
Richtig?
</td>
</tr>
<tr>
<td>
<input type="text" name="feld" maxlength="3" onkeyup="if(document.getElementsByName('feld')[0].value > 100) document.all.feld.value = 100">
</td>
<td>
<input type="button" id="button" value="Raten" onclick="rate()" class="button">
</td>
</tr>
</table>
</body>
</html>
die highscore funktionen sind auskommentiert, weil ich hier angestanden bin, ob ich abfragen nicht mit if(IE) und if(NS) abkürzen kann, als dass ich jedesmal if(document.all) und if(document.get...) schreiben muss. weiters gab es vorher nur eine highscore funktion, die je nach parameter den highscore eingetragen oder abgerufen hat. jetzt hab ich 2 gemacht, wobei die abruf-funktion nicht wie vorher nur daten zurückgeben soll, sondern gleich das ganz übernehmen soll.... da ich natürlich texte ändern will, und das nicht mit inputs lösen wollte sondern mit innerText und nodeValue hab ich natürlich vorher auch abfragen müssen, ob document.all oder document.getElementById und je nachdem den code ausführen. jetzt hab ich aber schon oft in sources gelesen, dass man zuerst eine variable IE anlegt und auf der den wert von document.all speichert (true oder false) und eine variable NS mit document.getElementById oder document.layers. nachher macht man nur noch if(IE) und if(NS) und die sache hat sich. jetzt meine fragen: - akzeptiert mittlerweile jeder browser (oder die geläufigsten) nodeValue? - darf innerText überhaupt noch verwendet werden (wie ich etwas über innerText in einem anderen forum gefragt hab, war das gleich ein skandal)? - wie gehts wirklich mit IE und NS? - was muss ich auf NS speichern? var NS = (document.getElementById || document.layers);? tia, mfg
|
that
ModeratorHoffnungsloser Optimist
|
document.getElementById sollte inzwischen jeder Browser können. Auch nodeValue ist in DOM-1 definiert, allerdings readonly. Sowohl IE als auch Gecko verstehen jedenfalls innerHTML.
IE und NS Variablen würde ich nicht machen, eher z.B. eine eigene setNodeValue Funktion, die je nach Browser das richtige tut.
Jede Browserabfrage im normalen Code (d.h. nicht in Funktionen eingepackt) ist IMHO ein Zeichen für schlechtes Design.
|
tomstig
OC Addicted
|
Jede Browserabfrage im normalen Code (d.h. nicht in Funktionen eingepackt) ist IMHO ein Zeichen für schlechtes Design. also abfrage in funktion und dann mit <body onload="xyz()"> abrufen? und wie könnte diese funktion ausschauen? weil ich glaub, dass var ns = document.firstChild nicht geht...
|
that
ModeratorHoffnungsloser Optimist
|
Wozu onLoad? Einfach im Script vorher definieren die Funktion, dann bei Bedarf aufrufen.
Aber warum verwendest du statt der Krücken nicht einfach das (nicht standardkonforme, aber weit verbreitete) innerHTML Property?
|
tomstig
OC Addicted
|
vor allem du als nicht ms-benutzer solltest das wissen, weil ich nehm kaum an, dass du den ie verwendest....
klartext: firefox verstehts nicht
|
that
ModeratorHoffnungsloser Optimist
|
vor allem du als nicht ms-benutzer solltest das wissen, weil ich nehm kaum an, dass du den ie verwendest....
klartext: firefox verstehts nicht Ich weiß nicht was du probiert hast, aber folgendes geht bei mir mit Mozilla 1.7.5 sowie Firefox 1.0 und auch mit Konqueror 3.3 unter Linux einwandfrei: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>innerHTML Test</title>
</head>
<body>
<div id="test">Test</div>
<p>
<a href="#" onclick="document.getElementById('test').innerHTML = '<b>Hallo</b>'; return false;">Click me</a>
</p>
</body>
</html>
Bearbeitet von that am 20.01.2005, 23:51
|
tomstig
OC Addicted
|
aha, strange, sry...  ist vorher nicht gegangen, lag wohl der fehler woanders... aber trotzdem wäre es interessant zu wissen, wie man das saubere trennen am besten aufbauen kann... edit: bin jetzt draufgekommen: innerHTML geht, innerText nicht...
|
that
ModeratorHoffnungsloser Optimist
|
aber trotzdem wäre es interessant zu wissen, wie man das saubere trennen am besten aufbauen kann... Du machst für alles, was unterschiedlich funktioniert, je eine Funktion, die diesen Unterschied kapselt. Diese verwendest du dann in deinem restlichen Code anstelle hässlicher "if"s.
|
watchout
Legendundead
|
und genau diese gekapselten codeschnipsel schreibst du in "conditional comments".
|
that
ModeratorHoffnungsloser Optimist
|
und genau diese gekapselten codeschnipsel schreibst du in "conditional comments". <!--[if IE]>
Achtung, Sie verwenden einen nicht standardkonformen Browser!
<a href="http://getfirefox.com">Get Firefox now!</a>
<![endif]-->
|
tomstig
OC Addicted
|
hehe, die muss ich noch einbauen ^^
mhh, für alles eine eigene funktion klingt nach viel aufwand :/
|
Rektal
Here to stay
|
Nicht wirklich. Es sind nicht viele, und die brauchst nicht nochmal fuer spaeter schreiben. Und brauchen wirst sie immer wieder 
|
Anmeldung