Javascriptを用いた占い機能についての質問です。

###前提・実現したいこと
JavaScriptで占いを作っているのですが、一つのボタンのonclick disableを他のボタンにも適用する事は可能でしょうか？
仕様を以下のようなものにしたいと思っています。

「今日の占い」と描かれているボタン(画像)が2枚並んでいる。
どちらかをクリックするとクリックされた画像が「ラッキー」「アンラッキー」などと書かれた画像に切り替わる(クリックされていない方の画像はそのまま)。
クリック後のボタン(画像)は2枚ともonclick disableとなり、再読み込みするまで二度目が引けなくなる。

###発生している問題・エラーメッセージ
IDが重複していることが原因だと思うのですが、どちらを押しても一枚目(左側)に結果が反映されてしまいます。

###該当のソースコード

<script language="JavaScript">
        images = new
        Array("lucky.jpg","unlucky.jpg");
        function uranai(){
        myRnd = Math.floor(Math.random( )*images.length);
        document.getElementById("card").src = images[myRnd];
        }
</script>

<form>
          <input type="image" ID="card" src="default.jpg" onclick="uranai(); disabled = true;">
          <input type="image" ID="card" src="default.jpg" onclick="uranai(); disabled = true;">
</form>

###試したこと

リストIDを分ける

card1,card2といった風にIDを分けるのかと思ったのですが、scriptのgetElementByIdでは複数のIDは指定できないうえ、もし出来たとしてもクリックされていない方の画像にも結果が出てしまいます。

functionとIDを分ける

card1とfunction1、card2とfunction2のようにしてしまっては、当然ですが完全に別のものになってしまいます。

PC言語に触れ始めて間もなく、文章も拙いもので申し訳有りませんが大変困っております。
解決法をご教示いただければと存じます。よろしくお願いします。

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

回答3件

type属性にimageを指定している場合、alt属性が必要です(<input type="image">－HTML5タグリファレンス)。
id属性はユニークでなければならないので、もし1ページ内で同じ名前を何度も使いたいときはclass属性を使うと良いと思います。
onclick属性を使うことはあまり好ましくないので、addEventListenerを使うほうがいいと思います。
scriptタグのlanguage属性は廃止されているので、type属性を代わりに使うほうが良いです。
new Arrayよりも[]を使った配列宣言のほうが好ましいです。

以上を踏まえると、質問者さんのコードは以下のように書けると思います。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6</head>
7<body>
8<form>
9    <input type="image" alt="画像1" class="card" src="https://placehold.jp/200x150.png">
10    <input type="image" alt="画像2" class="card" src="https://placehold.jp/200x150.png">
11</form>
12<script type="text/javascript">
13    let images = [
14        "https://placehold.jp/ff4242/ffffff/200x150.png",
15        "https://placehold.jp/3d4070/ffffff/200x150.png"
16    ];
17    let getClassName = document.getElementsByClassName("card");
18
19    Array.from(getClassName).forEach(function (e) {
20        e.addEventListener("click", function (event) {
21            event.preventDefault();
22            myRnd = Math.floor(Math.random() * images.length);
23            this.src = images[myRnd];
24            for (let i = 0; i < getClassName.length; i++) {
25                getClassName[i].disabled = true;
26            }
27        });
28    });
29</script>
30</body>
31</html>

投稿2017/02/01 15:16

編集2017/02/05 09:06

s8_chu

総合スコア14731

mochi.403

2017/02/02 02:34

ご回答ありがとうございます。わかりやすい解説で大変助かりました。書いていただいたコードをそのまま実行してみたのですが、クリック後にクリックされていない画像のクリックがdisableにならないようでした・・・

s8_chu

2017/02/03 16:58

クリックした要素のみにdisabledを付与するものだと勘違いしていました。修正させていただきました。

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

ベストアンサー

IDを別のものにし、uranai関数の引数でどのボタンが押されたのかを指定する。

html
1<script language="JavaScript">
2        images = new
3        Array("lucky.jpg","unlucky.jpg");
4        function uranai(num){
5        myRnd = Math.floor(Math.random( )*images.length);
6        document.getElementById("card"+num).src = images[myRnd];
7
8        document.getElementById("card0").disabled="true";
9        document.getElementById("card1").disabled="true";        
10}
11</script>
12
13<form>
14          <input type="image" ID="card0" src="default.jpg" onclick="uranai(0);">
15          <input type="image" ID="card1" src="default.jpg" onclick="uranai(1);">
16</form>