Script geht nur im IE

fanste · 24. August 2005

Hi,
Ich habe mir da ein kleines Schachspiel zusammengeschustert. Der Code ist zwar nicht der Beste, aber es funktioniert (Bin Anfänger auf diesem Gebiet

). Leider nur im IE. Únd das ist das Problem. ich hab keine Ahnung warum. Das Script hört schon bei der ersten Funktion auf zu arbeiten. Also bei der for-Schleife. Könnt ihr mir sagen warum?

Der Link: http://fanste.fh3.info/muehle/muehle.htm

Hier mal die Codes
script.js

Code:

var one = "white.gif";
var two = "black.gif";
var one_name = "Spieler 1";
var two_name = "Spieler 2";

var last = two_name;
var sel = "";
var can = false;
var checked = false;

var muehle = false;
var d = document.getElementById;
var ismuehle = false;

function start_game()
{
	for(i=1;i<=3;i++)
	{
		for(j=1;j<=8;j++)
		{
			d(i+""+j).style.backgroundImage="";
		}
	}
	
	one_name = document.spielerdaten.input_name_one.value;
	two_name = document.spielerdaten.input_name_two.value;
	last = two_name;
	
	d('spielerdaten').style.display="none";
	d('spielfeld').style.display="block";

	dn = document.getElementsByName;
	dn('name_one')[0].id = "name_"+one_name;
	dn('name_one')[0].value = one_name;
	dn('set_one')[0].id = "set_"+one_name;
	dn('set_one')[0].value = "9";
	dn('lose_one')[0].id = "lose_"+one_name;
	dn('lose_one')[0].value = "0";
	dn('win_one')[0].id = "win_"+one_name;
	
	dn('name_two')[0].id = "name_"+two_name;
	dn('name_two')[0].value = two_name;
	dn('set_two')[0].id = "set_"+two_name;
	dn('set_two')[0].value = "9";
	dn('lose_two')[0].id = "lose_"+two_name;
	dn('lose_two')[0].value = "0";
	dn('win_two')[0].id = "win_"+two_name;

	d('button1').disabled=true;
}


function call(which)
{
	
	if(ismuehle==false)
	{
		if(muehle)
		{
			ismuehle = true;
		}		
	}
	muehle = false;
	if(last == one_name)
	{
		if(ismuehle)
		{
			delstone(which,two,two_name);
		}
		else
		{
			setstone(which,two,two_name);
		}
	}
	else if(last == two_name)
	{
		if(ismuehle)
		{
			delstone(which,one,one_name);
		}
		else
		{
			setstone(which,one,one_name);
		}
	}
}

function setstone(which,col1,player)
{
	if(which.style.backgroundImage==""||which.style.backgroundImage=="url("+col1+")")
	{
		if((d("set_"+player).value=="0"&&which.style.backgroundImage=="url("+col1+")")||sel!="")
		{
			if(sel == "")
			{
				sel = which;
				which.style.backgroundColor="red";
				selcords = which.id.split('');
				selcords1 = which.id.split('');
			}
			else if(sel == which)
			{
				sel = "";
				which.style.backgroundColor="";
			}
			else
			{
                if(which.style.backgroundImage=="url("+col1+")")
				{
					alert('Da ist schon ein Stein von dir. Suche dir einen anderen Platz!!');
				}
				else
				{
					cords = which.id.split('');
					if(d('lose_'+player).value==6)
					{
						can = true;
					}
					else
					{
				    	if(selcords[1]==cords[1]&&(cords[1]%2==0))
					    {
					    	if(selcords[0]+++1==cords[0])
					    	{
						    	can = true;
						    }
					    	else if(selcords1[0]-1==cords[0]&&(cords[1]%2==0))
					    	{
					    		can = true;
					    	}
					    }
					    else if(selcords[0]==cords[0])
					    {
					    	if(selcords[1]+++1==cords[1])
					    	{
					    		can = true;
					    	}
					    	else if(selcords1[1]-1==cords[1])
					    	{
					    		can = true;
					    	}
					    	else if(selcords1[1]-7==cords[1])
					    	{
					    		can = true;
					    	}
					    	else if(selcords1[1]+++7==cords[1])
					    	{
								can = true;
							}
				    	}
				    }
				    
					if(can)
					{
						which.style.backgroundImage="url("+col1+")";
						sel.style.backgroundImage="";
						sel.style.backgroundColor="";
						sel="";
						can = false;
						checked = check(col1,which);
						if(checked)
						{
							last = player;
							d('whocomes').innerHTML=(last==one_name?two_name:one_name)+", du bist dran!";
						}
					}
					else
					{
						sel.style.backgroundColor="";
						sel = "";
						alert('ungültiger Zug!');
					}
				}
			}
		}
		else
		{
			if(which.style.backgroundImage=="url("+col1+")")
			{
				alert('Da ist schon ein Stein von dir. Suche dir einen anderen Platz!!');
			}
			else
			{
				if(d("set_"+player).value=="0"&&which.style.backgroundImage=="")
				{
					alert('Du hast doch keine Steine mehr, die du setzen kannst. Du musst einen Stein bewegen!');
				}
				else
				{
					which.style.backgroundImage="url("+col1+")";
					d("set_"+player).value=d("set_"+player).value-1;
					checked = check(col1,which);
					if(checked)
					{
						last = player;
						d('whocomes').innerHTML=(last==one_name?two_name:one_name)+", du bist dran!";
					}
				}
			}
		}
	}
	else
	{
		alert('Du willst doch wohl nicht den Stein vom anderen Spieler bewegen?!');
	}
}

function check(col2,which)
{
	id = parseInt(which.id);
	
	ids = which.id.split('');
	ids[0] = parseInt(ids[0]);
	ids[1] = parseInt(ids[1]);	
	
	var first = false;
	var second = false;

	if(ids[1]==1)
	{
		if(d(ids[0]*10+8).style.backgroundImage=="url("+col2+")"&&d(ids[0]*10+7).style.backgroundImage=="url("+col2+")")
		{
			muehle = true;
		}
		else if(d(id+1).style.backgroundImage=="url("+col2+")"&&d(id+2).style.backgroundImage=="url("+col2+")")
		{
			muehle = true;
		}
	}
	
	if(ids[1]==8)
	{
		if(d(ids[0]*10+1).style.backgroundImage=="url("+col2+")"&&d(ids[0]*10+7).style.backgroundImage=="url("+col2+")")
		{
			muehle = true;
		}
	}

	if(ids[0]==1&&(ids[1]==2||ids[1]==4||ids[1]==6||ids[1]==8))
	{
			if(d(id+10).style.backgroundImage=="url("+col2+")"&&d(id+20).style.backgroundImage=="url("+col2+")")
			{
				muehle = true;
			}
	}
	if(ids[0]==2&&(ids[1]==2||ids[1]==4||ids[1]==6||ids[1]==8))
	{
			if(d(id+10).style.backgroundImage=="url("+col2+")"&&d(id-10).style.backgroundImage=="url("+col2+")")
			{
				muehle = true;
			}
	}
	if(ids[0]==3&&(ids[1]==2||ids[1]==4||ids[1]==6||ids[1]==8))
	{
			if(d(id-10).style.backgroundImage=="url("+col2+")"&&d(id-20).style.backgroundImage=="url("+col2+")")
			{
				muehle = true;
			}
	}
	
	if(ids[1]%2==0&&ids[1]!=8)
	{
		if(d(id+1).style.backgroundImage=="url("+col2+")"&&d(id-1).style.backgroundImage=="url("+col2+")")
		{
			muehle = true;
		}
	}
	if(ids[1]==7)
	{
		if(d(id-1).style.backgroundImage=="url("+col2+")"&&d(id-2).style.backgroundImage=="url("+col2+")")
		{
			muehle = true;
		}
		else if(d(id+1).style.backgroundImage=="url("+col2+")"&&d(ids[0]*10+1).style.backgroundImage=="url("+col2+")")
		{
			muehle = true;
		}
	}
	if(ids[1]==3)
	{
		if(d(id-1).style.backgroundImage=="url("+col2+")"&&d(id-2).style.backgroundImage=="url("+col2+")")
		{
			muehle = true;
		}
		else if(d(id+1).style.backgroundImage=="url("+col2+")"&&d(id+2).style.backgroundImage=="url("+col2+")")
		{
			muehle = true;
		}
	}
	if(ids[1]==5)
	{
		if(d(id+1).style.backgroundImage=="url("+col2+")"&&d(id+2).style.backgroundImage=="url("+col2+")")
		{
			muehle = true;
		}
		else if(d(id-1).style.backgroundImage=="url("+col2+")"&&d(id-2).style.backgroundImage=="url("+col2+")")
		{
			muehle = true;
		}
	}

	if(muehle)
	{
		document.getElementById('whocomes').innerHTML="Du hast eine Mühle. Welcher Stein soll vom Platz verschwinden?";
		d('button').disabled=false;
		return false;
	}
	else
	{
		muehle = false;
		return true;
	}

}
function delstone(which,col3,player)
{
	if(which.style.backgroundImage=="url("+col3+")")
	{
		alert('Willst du dir wirklich selbst einen Stein wegnehemen');
	}
	else if(which.style.backgroundImage=="")
	{
		alert('Da ist kein Stein!!');
	}
	else
	{
		field = (player == one_name?two_name:one_name);
		if(d('lose_'+field).value==6)
		{
			checked = true;
		}
		else
		{
			color = (col3==two?one:two);
			checked = check(color,which);
		}
		if(checked)
		{
			which.style.backgroundImage="";
			zahl = d("lose_"+field).value;
			zahl = parseInt(zahl);
			d("lose_"+field).value=zahl+1;
			last = player;
			ismuehle = false;
			d('button').disabled=true;
			d('whocomes').innerHTML=(last==one_name?two_name:one_name)+", du bist dran!";
			
			p = (player==one_name?two_name:one_name);			
			if(d('lose_'+p).value == 7)
			{
				alert('Spiel beendet!! Gewonnen hat '+player+'. Herzlichen Glückwunsch!!');
				zahl = d("win_"+player).value;
				zahl = parseInt(zahl);
				d("win_"+player).value=zahl+1;
				d('button1').disabled=false;
			}
		}
		else
		{
			alert('Du darfst keinen Stein von einer Mühle nehemen.');
		}
	}
}

function weiter()
{
	last = (last==one_name?two_name:one_name);
	d('whocomes').innerHTML=(last==one_name?two_name:one_name)+", du bist dran!";
	
	ismuehle = false;	
	muehle = false;
	d('button').disabled=true;
}

mühle.htm

HTML:

<html>

<head>
<title>Neue Seite 1</title>
<style type="text/css">
div
{
	cursor:hand;
}
</style>
</head>

<body bgcolor="#988E6E">
<script type="text/javascript" src="script.js"></script>

<div id="spielerdaten">
<form name="spielerdaten">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="400" id="AutoNumber1">
  <tr>
    <td width="105" align="center">Spieler</td>
    <td width="155" align="center">Name</td>
    <td width="136" align="center">Farbe</td>
  </tr>
  <tr>
    <td width="105" align="center">1</td>
    <td width="155" align="center">
<input type="text" size="20" name="input_name_one" value="Spieler 1" style="background:#988E6E;"></td>
    <td width="136" align="center">weiß</td>
  </tr>
  <tr>
    <td width="105" align="center">2</td>
    <td width="155" align="center">
<input type="text" size="20" name="input_name_two" value="Spieler 2" style="background:#988E6E;"></td>
    <td width="136" align="center">schwarz</td>
  </tr>
</table>
</form>
<button onClick="start_game();" id="button0" style="background:#988E6E">Spiel starten</button>
</div>

<div style="display:none;cursor:auto;" id="spielfeld">
<table border="0" style="border-collapse: collapse" bordercolor="#111111" width="385" height="385" background="bg.gif" style="float:left;background-repeat:no-repeat;background-position:center">
  <tr>
    <td width="70" valign="top" height="55"><div id="11" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="65"  height="55">&nbsp;</td>
    <td width="47" height="55">&nbsp;</td>
    <td width="42" valign="top" height="55"><div id="12" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="57" height="55">&nbsp;</td>
    <td width="74" height="55">&nbsp;</td>
    <td width="30" valign="top" height="55"><div id="13" style="width:30;height:30;" onClick="call(this);"></div></td>
  </tr>
  <tr>
    <td width="70" height="55">&nbsp;</td>
    <td width="65" height="55"><div id="21" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="47" height="55">&nbsp;</td>
    <td width="42" height="55"><div id="22" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="57" height="55">&nbsp;</td>
    <td width="74" height="55"><div id="23" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="30" height="55">&nbsp;</td>
  </tr>
  <tr>
    <td width="70" height="55">&nbsp;</td>
    <td width="65" height="55">&nbsp;</td>
    <td width="47" valign="bottom" height="55"><div id="31" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="42" valign="bottom" height="55"><div id="32" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="57" valign="bottom" height="55"><div id="33" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="74" height="55">&nbsp;</td>
    <td width="30" height="55">&nbsp;</td>
  </tr>
  <tr>
    <td width="70" height="55"><div id="18" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="65" height="55"><div id="28" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="47" height="55"><div id="38" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="42" height="55">&nbsp;</td>
    <td width="57" height="55"><div id="34" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="74" height="55"><div id="24" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="30" height="55"><div id="14" style="width:30;height:30;" onClick="call(this);"></div></td>
  </tr>
  <tr>
    <td width="70" height="55">&nbsp;</td>
    <td width="65" height="55">&nbsp;</td>
    <td width="47" height="55" valign="top"><div id="37" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="42" valign="top" height="55"><div id="36" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="57" valign="top" height="55"><div id="35" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="74" height="55">&nbsp;</td>
    <td width="30" height="55">&nbsp;</td>
  </tr>
  <tr>
    <td width="70" height="55">&nbsp;</td>
    <td width="65" valign="top" height="55"><div id="27" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="47" height="55">&nbsp;</td>
    <td width="42" valign="top" height="55"><div id="26" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="57" height="55">&nbsp;</td>
    <td width="74" valign="top" height="55"><div id="25" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="30" height="55">&nbsp;</td>
  </tr>
  <tr>
    <td width="70" valign="bottom" height="55"><div id="17" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="65" height="55">&nbsp;</td>
    <td width="47" height="55">&nbsp;</td>
    <td width="42" valign="bottom" height="55"><div id="16" style="width:30;height:30;" onClick="call(this);"></div></td>
    <td width="57" height="55">&nbsp;</td>
    <td width="74" height="55">&nbsp;</td>
    <td width="30" valign="bottom" height="55"><div id="15" style="width:30;height:30;" onClick="call(this);"></div></td>
  </tr>
</table>
<br><br>
<div style="float:left;width:394;height:51;margin-left:20px;font-size:15pt;font-weight:bold;" id="whocomes"></div>
<br><br><br>

<form name="status">
<table border="1" style="border-collapse: collapse" bordercolor="#111111" width="437">
  <tr>
    <td width="86" align="center">Spieler</td>
    <td width="86" align="center">Noch setzten</td>
    <td width="93" align="center">Steine verloren</td>
    <td width="109" align="center">Spiele gewonnen</td>
    <td width="60" align="center">Farbe</td>
  </tr>
  <tr>
	<td width="86" align="center">
    <input type="text" name="name_one" id="name_Spieler 1" value="Spieler 1" readonly size="1" style="border:medium none;background:#988E6E;width:100%;"></td>
    <td width="86" align="center"><input type="text" name="set_one" id="set_Spieler 1" value="9" readonly size="1" style="border:medium none;background:#988E6E;width:10;"></td>
    <td width="93" align="center"><input type="text" name="lose_one" id="lose_Spieler 1" value="0" readonly size="1" style="border:none;background:#988E6E;width:10;"></td>
    <td width="109" align="center"><input type="text" name="win_one" id="lose_Spieler 1" value="0" readonly size="1" style="border:none;background:#988E6E;width:10;"></td>
	<td width="60" align="center">weiß</td>
  </tr>
  <tr>
    <td width="86" align="center">
    <input type="text" name="name_two" id="name_Spieler 2" value="Spieler 2" readonly size="1" style="border:none;background:#988E6E;width:100%;"></td>
    <td width="86" align="center"><input type="text" name="set_two" id="set_Spieler 2" value="9" readonly size="1" style="border:none;background:#988E6E;width:10;"></td>
    <td width="93" align="center"><input type="text" name="lose_two" id="lose_Spieler 2" value="0" readonly size="1" style="border:none;background:#988E6E;width:10;"></td>
    <td width="109" align="center"><input type="text" name="win_two" id="lose_Spieler 2" value="0" readonly size="1" style="border:none;background:#988E6E;width:10;"></td>
  	<td width="60" align="center">schwarz</td>
  </tr>
</table>
</form>
<br><br>
<div style="float:left;width:394;height:51;margin-left:20px;font-size:15pt;font-weight:bold;"><button id="button"  style="background:#988E6E" disabled onClick="weiter();">Keine freien Steine vorhanden</button>
  <p>
  <button id="button1"  style="background:#988E6E" disabled onClick="start_game();">Neues Spiel</button></div>
</div>
</body>

</html>

Im Opera und Firefox (andere Browser weiß ich nicht), scheint er nicht einmal die script.js in die HTML datei zu laden.
Hier nochmal der Link: http://fanste.fh3.info/muehle/muehle.htm

Ich hoffe Ihr könnt mir helfen.
Danke im voraus.

mb fanste

PS: Ich werde mich erst wieder in 2 Wochen melden. Bin in Urlab ab morgen.

Gottox · 24. August 2005

1. Scripteinbindung möglichst immer im Head
2. solche Sachen wie document.spielerdaten.input_name_one.value; werden im IE nicht standartkonform gehandhabt. Schreib statt dessen document.forms['spielerdaten'].elements['input_name_one'].value

Wird wahrscheinlich nicht das einzige Problem sein. Wäre schön, wenn du die Fehlermeldungen der beiden Browser auch mal posten würdest. würde jedenfalls helfen.

Sven Mintel · 24. August 2005

Solche Sachen wie

Code:

var d = document.getElementById;
//...
d(i+""+j).style.backgroundImage="";

functionieren nur im IE, du musst das document.getElementById dort überall ausschreiben, kannst es also nicht in einer Variablen speichern.
Alternativ könntest du dir die Schreibarbeit ersparen, indem du eval() benutzt.

Code:

var d = 'document.getElementById';
//...
eval(d+'(i+""+j).style.backgroundColor=""');

Selbiges gilt auch für dn

Gottox · 24. August 2005

Hab gerade keinen Editor zur Verfügung, aber das müsste doch funktionieren...

Sven Mintel · 24. August 2005

Tut es aber nur im IE

Anderer Workaround, um die Schreibarbeit zu sparen:

Code:

d  = function(x){return document.getElementById(x);}
dn = function(x){return document.getElementsByName(x);}

Gottox · 24. August 2005

Jaja... schon ok... die andern haben immer recht und ich nie...*grml*

Sven Mintel · 24. August 2005

Gottox hat gesagt.:
Jaja... schon ok... die andern haben immer recht und ich nie...*grml*

Die andern sind nur schreibfauler als du, und sind daher bei ähnlichen Versuchen schon mal über die Sache gestolpert

fanste · 7. September 2005

Hi,
Bin wieder zurück. Schön braungebrannt.

Aber nun zum Thema!

Danke euch beiden! Es klappt nun wunderbar.

@gottox

Wird wahrscheinlich nicht das einzige Problem sein. Wäre schön, wenn du die Fehlermeldungen der beiden Browser auch mal posten würdest. würde jedenfalls helfen.

Wo bekomme ich die Fehlermeldung im Opera und im Firefox angezeigt?

Sven Mintel · 8. September 2005

Die JS-Konsole findest du in Opera und FF irgendwo unter Extras/Einstellungen

Im FF kannst du auch javascript: in die Adresszeile eingeben... dann erscheint sie.

Script geht nur im IE

fanste

Erfahrenes Mitglied

Gottox

Erfahrenes Mitglied

Sven Mintel

Mitglied

Gottox

Erfahrenes Mitglied

Sven Mintel

Mitglied

Gottox

Erfahrenes Mitglied

Sven Mintel

Mitglied

fanste

Erfahrenes Mitglied

Sven Mintel

Mitglied

Neue Beiträge