javascriptでオセロを作ろうと思っています。初めに「クリックしたtdタグの背景色を、クリック数が奇数回なら白、偶数なら黒にする」コードを書きたいのですが、変数とthis(クリックされたtdタグ)の使い方がいまいち分かりません。ご教授いただければと思います。無題ドキュメント * { margin: 0; padding: 0; } td { width: 100px; height: 100px; } .green { background-color:#093; } .black { background-color:#333; } .white { background-color:#CCC; } よろしくお願いします。

No.1 の補足に対する回答です。スタイルとして以下の定義を成されたのなら、スクリプトでも活用しない手はありません。 .black { background-color:#333; } .white { background-color:#CCC; } ○ i.style.backgroundColor = "#ccc" → 黒だけど白とは矛盾ではないだろうか ○ i.className = 'white' → すっきり明快 className は属性 class と同等です ○ i.classList.remove('green').remove('black').add('white') → 厳格で副作用のない記述方法古いIEでは動作しない点だけ注意 classList は、属性 class を空白区切りした配列と同様です

javascript オセロ

解決済

質問者：komado45oji4768
質問日時：2013/10/15 12:34
回答数：2件

javascriptでオセロを作ろうと思っています。
初めに「クリックしたtdタグの背景色を、クリック数が奇数回なら白、偶数なら黒にする」コードを書きたいのですが、
変数とthis(クリックされたtdタグ)の使い方がいまいち分かりません。
ご教授いただければと思います。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

td {
width: 100px;
height: 100px;
}

.green {
background-color:#093;
}

.black {
background-color:#333;
}

.white {
background-color:#CCC;
}

</style>
<body>

<table>
<tr>
<td class="green" onClick="osero(this)"></td>
<td class="green" onClick="osero(this)"></td>
<td class="green" onClick="osero(this)"></td>
<td class="green" onClick="osero(this)"></td>
</tr>

<tr>
<td class="green" onClick="osero(this)"></td>
<td class="black" onClick="osero(this)"></td>
<td class="white" onClick="osero(this)"></td>
<td class="green" onClick="osero(this)"></td>
</tr>

<tr>
<td class="green" onClick="osero(this)"></td>
<td class="white" onClick="osero(this)"></td>
<td class="black" onClick="osero(this)"></td>
<td class="green" onClick="osero(this)"></td>
</tr>

<tr>
<td class="green" onClick="osero(this)"></td>
<td class="green" onClick="osero(this)"></td>
<td class="green" onClick="osero(this)"></td>
<td class="green" onClick="osero(this)"></td>
</tr>

</table>

<script type="text/javascript">

</script>
</body>
</html>

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： Ogre7077
回答日時：2013/10/15 12:59

<td onClick="osero(this)"> の this は、該当するTD要素そのもので、HTMLTableDataCellElement のインスタンスです。

なので、要素を操作する方法は
誤: document.i.style // i は ID でも NAME でもない
正: i.style

それとは別に誤りがあります

誤: c_count = c_count++ // 結局加算していません
正: c_count++;

誤: if (c_count % 0) // 0で除算エラー
正: if (c_count % 2)

それとは別に注意点です

c_count = 0 // var を付けるべき
backgroundColor = "#ccc" // クラス名は使わないのか?

この回答への補足

お返事ありがとう御座います。

指摘箇所を修正したところ、無事動作しました。
解決はしたのですが、
Ogre7077さんの言われる
>backgroundColor = "#ccc" // クラス名は使わないのか?
というのはどういうことなのでしょうか。
javascriptをはじめて間もないのでよく分かりません。
よかったらそれも教えていただけるとうれしいです。

よろしくお願いします。

補足日時：2013/10/15 14:35

通報する

- 0
- 件

通報する

この回答へのお礼

無事解決しました。
ありがとうございました。

通報する

お礼日時：2013/10/16 12:18

No.2

回答者： Ogre7077
回答日時：2013/10/15 20:39

No.1 の補足に対する回答です。

スタイルとして以下の定義を成されたのなら、スクリプトでも活用しない手はありません。
.black { background-color:#333; }
.white { background-color:#CCC; }

○ i.style.backgroundColor = "#ccc"
<td class=black> → <td class=black style="background-color:#ccc">
黒だけど白とは矛盾ではないだろうか

○ i.className = 'white'
<td class=black> → <td class=white>
すっきり明快
className は属性 class と同等です

○ i.classList.remove('green').remove('black').add('white')
<td class=black> → <td class=white>
厳格で副作用のない記述方法
古いIEでは動作しない点だけ注意
classList は、属性 class を空白区切りした配列と同様です