nicht angemeldet
Hallo,
ich habe folgendes Problem:
Ich bin gerade am ein TicTacToe mit hilfe von JS, HTML und CSS zu machen. Damit ich ein alert-box machen kann, wo drin steht "X hat gewonnen" oä. muss die Seite zuerst aktualisiert werden. Aber wenn ich das mache, dann verschwindet dass "X" bzw. "O" wieder, welches ich per onclick in die DIV-Boxen gebracht habe. Was könnte ich machen??
HTML:
<html>
<head>
<link rel="stylesheet" href="CSS.css" type="text/css">
</head>
<body>
<div id="feld1">
<script language="JavaScript" src="TicTacjs.js">
</script>
</div>
<div id="feld2">
<script language="JavaScript" src="TicTacjs.js">
</script>
</div>
<div id="feld3">
<script language="JavaScript" src="TicTacjs.js">
</script>
</div>
<div id= "feld4" >
<script language="JavaScript" src="TicTacjs.js">
</script>
</div>
<div id="feld5">
<script language="JavaScript" src="TicTacjs.js">
</script>
</div>
<div id="feld6">
<script language="JavaScript" src="TicTacjs.js">
</script>
</div>
<div id="feld7">
<script language="JavaScript" src="TicTacjs.js">
</script>
</div>
<div id="feld8">
<script language="JavaScript" src="TicTacjs.js">
</script>
</div>
<div id="feld9">
<script language="JavaScript" src="TicTacjs.js">
</script>
</div>
</body>
</html>
CSS:
#feld1 {
background-color:42B819;
position:absolute;
top:50px;
left:50px;
height:50px;
width:50px;
color:FFFFFF;
text-align:center;
font-size:40px;
z-index:2;
}
#feld2 {
background-color:42B819;
position:absolute;
top:50px;
left:110px;
height:50px;
width:50px;
color:FFFFFF;
text-align:center;
font-size:40px;
z-index:2;
}
#feld3 {
background-color:42B819;
position:absolute;
top:50px;
left:170px;
height:50px;
width:50px;
color:FFFFFF;
text-align:center;
font-size:40px;
z-index:2;
}
#feld4 {
background-color:42B819;
position:absolute;
top:110px;
left:50px;
height:50px;
width:50px;
color:FFFFFF;
text-align:center;
font-size:40px;
z-index:2;
}
#feld5 {
background-color:42B819;
position:absolute;
top:110px;
left:110px;
height:50px;
width:50px;
color:FFFFFF;
text-align:center;
font-size:40px;
z-index:2,
}
#feld6 {
background-color:42B819;
position:absolute;
top:110px;
left:170px;
height:50px;
width:50px;
color:FFFFFF;
text-align:center;
font-size:40px;
z-index:2;
}
#feld7 {
background-color:42B819;
position:absolute;
top:170px;
left:50px;
height:50px;
width:50px;
color:FFFFFF;
text-align:center;
font-size:40px;
z-index:2;
}
#feld8 {
background-color:42B819;
position:absolute;
top:170px;
left:110px;
height:50px;
width:50px;
color:FFFFFF;
text-align:center;
font-size:40px;
z-index:2;
}
#feld9 {
background-color:42B819;
position:absolute;
top:170px;
left:170px;
height:50px;
width:50px;
color:FFFFFF;
text-align:center;
font-size:40px;
z-index:2;
}
JS:
var winner=0;
var txt1="X";
var txt2="O";
feld1.onclick = function()
{
++winner;
if (winner==1 || winner==3 || winner==5 || winner==7 || winner==9)
{
document.all.feld1.innerText = (txt1);
}
else
{
document.all.feld1.innerText = (txt2);
}
}
feld2.onclick = function()
{
++winner;
if (winner==1 || winner==3 || winner==5 || winner==7 || winner==9)
{
document.all.feld2.innerText = (txt1);
}
else
{
document.all.feld2.innerText = (txt2);
}
}
feld3.onclick = function()
{
++winner;
if (winner==1 || winner==3 || winner==5 || winner==7 || winner==9)
{
document.all.feld3.innerText = (txt1);
}
else
{
document.all.feld3.innerText = (txt2);
}
};