質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • JavaScript

    17476questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • onclick

    25questions

    onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 716

mochi.403

score 1

前提・実現したいこと

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+3

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>タイトル</title>
</head>
<body>
<form>
    <input type="image" alt="画像1" class="card" src="https://placehold.jp/200x150.png">
    <input type="image" alt="画像2" class="card" src="https://placehold.jp/200x150.png">
</form>
<script type="text/javascript">
    let images = [
        "https://placehold.jp/ff4242/ffffff/200x150.png",
        "https://placehold.jp/3d4070/ffffff/200x150.png"
    ];
    let getClassName = document.getElementsByClassName("card");

    Array.from(getClassName).forEach(function (e) {
        e.addEventListener("click", function (event) {
            event.preventDefault();
            myRnd = Math.floor(Math.random() * images.length);
            this.src = images[myRnd];
            for (let i = 0; i < getClassName.length; i++) {
                getClassName[i].disabled = true;
            }
        });
    });
</script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/02 11:34

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

    キャンセル

  • 2017/02/04 01:58

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

    キャンセル

checkベストアンサー

+1

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

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

        document.getElementById("card0").disabled="true";
        document.getElementById("card1").disabled="true";        
}
</script>

<form>
          <input type="image" ID="card0" src="default.jpg" onclick="uranai(0);">
          <input type="image" ID="card1" src="default.jpg" onclick="uranai(1);">
</form>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/02 11:41

    ご回答ありがとうございます。書いていただいたコードにて思い通りの動きが実現できました。
    HeyHey0111さまが書いてくださったコードをもとに、
    他の回答者さまが書いてくださったルールや推奨される書式を踏まえてもう一度書いてみようと思います。

    キャンセル

+1

何かを参考にしたと思われるのですが、全般的に書き方が古すぎるなど突っ込みどころが満載です。

  • <script>language属性(type='text/javascript'とするか、何も書かないか)
  • わざわざnew Arrayなんて書かなくても、[]で配列を宣言できる
  • HTML属性は基本的に小文字で書きます。
  • id属性が重複しているので、どちらにしても(もとから)正しく動かないです。
  • onclickのようにイベントを直付けにするより、addEventListenerなどで別途与えるほうが好まれます。

もう少し新しいサンプルから学習した方がいいでしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/02 11:38

    家にあった相当古い本を参考にしまして、サンプルは動いたので問題ないと思っていました。
    これからはなるべく新しいものを参考にしたいと思います。ありがとうございました。

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    17476questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • onclick

    25questions

    onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです