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

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

ただいまの
回答率

88.04%

再:チェックボックスのチェックボックスの選択肢に応じて、表示する画像を変えたいです

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,548

score 65

①料金のセレクトボックスの¥1,000〜¥5,000の選択肢の場合に
"fathergift1.jpeg"の画像を「☆あなたへのおすすめプレゼントをここに表示します☆」の場所に表示させたいです。

下記のコードでは、エラーメッセージが出てしまうため、
IF文内のコードをご教示頂きたくお願い致します。
コード
 <!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset="utf-8">
<title>プレゼント診断</title>
<script type="text/javascript">
     
function hyoji(){
  var price = document.getElementById("price").value;
  if(price == "1000") {        
    document.writelen('<img src="fathergift1.jpeg">');
    }else{
      alert("製作中です。")
     }  
}  

</script>              
        
</head> 

<body>
<article>
    <h1>プレゼント診断</h1>
        <p><入力項目></p>
        <p>①料金:
        <select tabindex="5" id ="price">
            <option value="1000"  selected>¥1,000〜¥5,000</option>
            <option value="5000" >¥5,000〜¥10,000</option>
            <option value="10000" >¥10,000〜¥50,000</option>
            <option value="50000" >¥50,000〜¥100,000</option>
            <option value="100000" >¥100,000以上</option>
            </select>
            </p>
        <p>
        ②プレゼント用途:
           <input type="radio" name="purposes" value="girl">異性へ
           <input type="radio" name="purposes" value="family" >家族へ
           <input type="radio" name="purposes" value= "else">その他
        </p>
        
        <input type="button" value="表示する" onclick = "hyoji()">
        
        <p><strong> --おすすめプレゼント--</strong></p>
    <div><img id = "result">☆あなたへのおすすめプレゼントをここに表示します☆</div>
        
        
        <h2>ログイン</h2>
        <P><input type="submit" value="新規登録"><input type="submit" value="ログイン"></P>
        <P>メールアドレス:<input type="email" name="email" size="50"
        placeholder="please enter emaill" ></P>
        <P>パスワード:<input type="password" name="password" size="50"
        placeholder="please enter password"></P>
    
</article>
</body>
</html>




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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • rk7fd3s

    2015/09/29 00:51

    ページ下のヘルプを見て投稿の仕方を見ましょう。

    どんなエラーが出るのか明示しましょう。

    キャンセル

  • Tomoaki_Fukuda

    2015/09/29 02:33

    大変失礼致しました。
    エラーメッセージは「Uncaught TypeError: document.writelen is not a function」です。
    よろしくお願い致します。

    キャンセル

回答 2

checkベストアンサー

+1

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>プレゼント診断</title>
        <script type="text/javascript">
            window.onload = function () {
                hyoji();
            };
            function hyoji() {
                var opts = document.getElementById("price");
                for (var i = 0, i < opts.length; i++) {
                    if (opts[i].selected) {
                        var price = opts[i].value;
                    }
                }
                alert(price)
                if (price == "1000") {
                    document.getElementById("result").src = 'fathergift1.jpeg';
                } else {
                    alert("製作中です。");

                }
            }
        </script>
    </head>
    <body>
        <article>
            <h1>プレゼント診断</h1>
            <p><入力項目></p>
            <p>①料金:
                <select tabindex="5" id ="price">
                    <option value="1000" selected>¥1,000〜¥5,000</option>
                    <option value="5000" >¥5,000〜¥10,000</option>
                    <option value="10000" >¥10,000〜¥50,000</option>
                    <option value="50000" >¥50,000〜¥100,000</option>
                    <option value="100000" >¥100,000以上</option>
                </select>
            </p>
            <p>
                ②プレゼント用途:
                <input type="radio" name="purposes" value="girl">異性へ
                <input type="radio" name="purposes" value="family" >家族へ
                <input type="radio" name="purposes" value= "else">その他
            </p>

            <input type="button" value="表示する" onclick="hyoji()">

            <p><strong> --おすすめプレゼント--</strong></p>
            <div><img id="result">☆あなたへのおすすめプレゼントをここに表示します☆</div>

            <h2>ログイン</h2>
            <p><input type="submit" value="新規登録"><input type="submit" value="ログイン"></p>
            <p>メールアドレス:<input type="email" name="email" size="50" placeholder="please enter emaill" ></p>
            <p>パスワード:<input type="password" name="password" size="50" placeholder="please enter password"></p>
        </article>
    </body>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/09/29 12:46

    firefox では提示のコードで動作するようですが、他のブラウザだとダメ?

    var price = document.getElementById("price").value;

    キャンセル

  • 2015/09/29 14:13 編集

    なるほど。失礼しました。
    select[i] で参照できる仕様であることが確認できました。
    http://www2u.biglobe.ne.jp/~oz-07ams/2003/HTML/HTMLSelectElement.html

    キャンセル

  • 2015/09/30 01:01

    <お礼>
    昨日は、深夜にもかかわらず誠にありがとうございました。
    頂きました修正内容で再度トライしてみます。
    取り急ぎお礼申し上げます。ご対応誠にありがとうございました!!

    キャンセル

0

document.writelen が存在しない為、TypeError を返します。
HTMLImageElement#src を使ってください。

img要素でsrc属性は必須属性であり、alt属性も例外を除いて指定する必要があります。
#price はデフォルトで 1009 が選択されるので 1000 を指定した場合のsrc属性値を記入してください。alt属性値も適切な値を入れてください。
The W3C Markup Validation Serviceでチェックするといいと思います。

function hyoji () {
  var price = document.getElementById('price').value;

  if (price === '1000') {
    document.getElementById('result').src = 'fathergift1.jpg';
  } else {
    alert("製作中です。")
  }
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 88.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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