<javascript>ボタンをクリックで交互に切り替える

ボタンをクリックするたびに○と×が交互に切り替わるプログラムを作ろうと
以下の様に組んでみたのですがクリックすると×のみが表示される状態になってしまいました。
どこを直したらよいのでしょう。

<html>
<head>
<title>○×ゲーム(１マス)</title>
</head>

<body onLoad=init()>
<h4>○×ゲーム(１マス)</h4><hr>

<script language="JavaScript">

function init(){
	document.tick.r1c1.value ="  ";
}


function ticktack(){
	
	document.tick.r1c1.value = "○";
}

function ticktack(){
	
	document.tick.r1c1.value = "×";
}

</script>

<form name="tick">
<input type="button" name="r1c1" onclick="ticktack()">
</p>
</form>
</body>
</html>

回答よろしくお願いします。

kei344

2016/06/09 11:25

タイトルに「＜JavaScript＞」と入れなくてもタグを設定されていますので、不要です。

行動規範の内容に同意します

回答2件

javascript
1function ticktack(){
2    document.tick.r1c1.value = "○";
3}
4
5function ticktack(){
6    document.tick.r1c1.value = "×";
7}

同じ名前のfunctionを2回宣言しているので、後から宣言したもののみが有効になっています。

クリックすると×のみが表示

この現象はそのせいです。

どこを直したらよいのでしょう。

「function ticktack()」の中で、

1.現在のdocument.tick.r1c1.valueの値を取得する。
2.現在の値が「○」なら「×」を、「×」なら「○」をdocument.tick.r1c1.valueの新しい値としてセットする。

というように書けばよいと思います。

投稿2016/06/09 11:27

tkturbo

総合スコア5572

ベストアンサー

ticktackというメソッドを2回同じ名前で定義しているため、あとから書いた方で上書きされています。
丸とバツを切り替えるなら、ticktackをひとつにして、中の処理を「いまのvalueがバツなら丸に、丸ならバツに変える」という処理に変えたほうがよいと思います。

投稿2016/06/09 11:25

masaya_ohashi

総合スコア9206

Alpha

2016/06/09 11:41 編集

ticktackの部分を ``` function ticktack(){ if(document.tick.r1c1.value.match(/^×$/){ document.tick.r1c1.value = "○"; }else if(document.tick.r1c1.value.match(/^○$/){ document.tick.r1c1.value = "×"; } } ```` と変えてみたのですが動きません。おそらくifの条件が間違っているのですがどうおいたらよいのでしょう。