nicht angemeldet
onclick-text soll NICHT verschwinden bei reload
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);
}
};
-
Hi,
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.
Warum muss sie das?
<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>
...Das sieht alles andere als sinnvoll aus.
Wieso bindest du in jedem DIV-Element das gleiche Script ein?
CSS:
Wen soll denn das bei diesem Problem interessieren?
Bitte beschränke dich auf relevante Information.
if (winner==1 || winner==3 || winner==5 || winner==7 || winner==9)
{
document.all.feld1.innerText = (txt1);Informiere dich bitte, warum document.all absolut letztes Jahrtausend ist, und wie zeitgemäßer Zugriff auf Elemente mittels DOM-Methoden aussieht.
MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]