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

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

ただいまの
回答率

87.89%

JavaScriptによる適正検査ページの作成

解決済

回答 2

投稿

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

score 23

前提・実現したいこと

JavaScriptにて適正検査のページを作成しています。
まだ作成途中なのですが、うまく動作せず行き詰っています。

発生している問題・エラーメッセージ

xをクリックしても反応しません,,,

該当のソースコード

<header>
    <div class="header">
      <h1 class="header"><strong>営業47ヶ条</strong><span class="saiyou01">から</span>あなた<span class="saiyou01"></span>営業タイプ<span class="saiyou01"></sapn>診断します。</h1>
    </div>
  </header>

  <div class="main">
    <p class="check">チェック!営業47ヶ条</p>
    <p id="check01">1. 初対面の人との距離</p>
    <p id="check02">2. 挨拶のポイント</p>
    <p id="check03">3. 人と話すときの目線</p>
  </div>

  <div class="side">
    <p class="header01">チェック <span id="question00"></p>
    <p id="question01"></p>
    <p id="x"></p>
    <p id="question02"></p>
  </div>
  <script>
    (function() {
      'use strict';

      var no1 = document.getElementById('check01');
      var no2 = document.getElementById('check02');
      var no2 = document.getElementById('check02');
      var question00 = document.getElementById('question00');
      var question01 = document.getElementById('question01');
      var question02 = document.getElementById('question02');
      var x = document.getElementById('x');
      var x = '1. 0~50cm     ';
      var y = '2. 50cm~1m<BR>';
      var z = '3. 1m~1.5m     ';
      var n = '2. 1.5m~2m<BR>';

      no1.addEventListener('click', function(){
        question00.innerHTML = 'No.1 初対面の人との距離は?';
        question01.innerHTML = x + y + '<br>' +
                               z + n ;
      });
      //↓おそらくこの部分かと
      x.addEventListener('click', function(){
        question02.innerHTML = '近すぎます。'
      })
    })();

  </script>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+1

dom elementを取得した後に
文字列データで上書きしていますね

以下のようにすれば解決すると思います。

var xx = document.getElementById('x');
xx.addEventListener('click', function(){
  question02.innerHTML = '近すぎます。'
})

見辛いかもしれないので、こちらに追記します。

テストコード全文

<meta charset="utf-8">
<header>
    <div class="header">
        <h1 class="header">
            <strong>営業47ヶ条</strong><span class="saiyou01">から</span>あなた<span class="saiyou01"></span>営業タイプ<span class="saiyou01"></sapn>診断します。
        </h1>
    </div>
</header>

<div class="main">
    <p class="check">チェック!営業47ヶ条</p>
    <p id="check01">1. 初対面の人との距離</p>
    <p id="check02">2. 挨拶のポイント</p>
    <p id="check03">3. 人と話すときの目線</p>
</div>

<div class="side">
    <p class="header01">チェック <span id="question00"></p>
    <p id="question01"></p>
    <p id="x">test</p>
    <p id="question02"></p>
</div>
<script>
    ( function( ) {
        'use strict';

        var no1 = document.getElementById( 'check01' );
        var no2 = document.getElementById( 'check02' );
        var no2 = document.getElementById( 'check02' );
        var question00 = document.getElementById( 'question00' );
        var question01 = document.getElementById( 'question01' );
        var question02 = document.getElementById( 'question02' );
        var xx = document.getElementById( 'x' );
        var x = '<div id="answer01_01">1. 0~50cm</div>';
        var y = '2. 50cm~1m<BR>';
        var z = '3. 1m~1.5m';
        var n = '2. 1.5m~2m<BR>';

        no1.addEventListener( 'click', function ( ) {
            question00.innerHTML = 'No.1 初対面の人との距離は?';
            question01.innerHTML = x + y + '<br>' + z + n;
            document.getElementById( 'answer01_01' ).addEventListener( 'click', function ( ) {
                question02.innerHTML = '近すぎます。';
            } )
        });
    } )( );
</script>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/06/15 16:03

    有難うございます。
    度々大変恐れ入ります。
    ご回答いただいた通り、testをクリックするとquestion02が出力されます。
    testではなく、x = '1. 0~50cn'の部分をクリックして出力させる方法はございませんでしょうか。
    度々申し訳ございません。
    何卒、宜しくお願い申し上げます。

    キャンセル

  • 2016/06/15 16:10

    やりたいことが分かりました。
    問題を出して、回答をクリックした時までを動的に行おうとしているのですね。

    eventを紐付けるにはdom elementでないとなりません。
    なので、コードとしては汚いですが、動的に挿入するもの自体をdom要素にすれば良いわけです。
    テストコードを更新しましたのでご確認ください。

    キャンセル

  • 2016/06/15 16:29

    mtempa様

    無事動作しました。非常に助かりました。
    心より感謝申し上げます。

    キャンセル

0

//        ↓同じ変数名を使っている
      var x = document.getElementById('x');
      var x = '1. 0~50cm     ';

同じ変数名 x を2回使っているからではないでしょうか。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/06/15 15:45

    ご回答感謝申し上げます。
    確認させて頂きましたところ、やはり思う通りに行きません。
    私の希望は、innerHTML内のxの部分をクリックした後にアクションさせたいというところです。
    質問力が乏しく申し訳ございません。

    ご回答の程、何卒宜しくお願い申し上げます。

    キャンセル

  • 2016/06/15 16:28

    次からは、確認して、何をどう変更して、それがどうなって、エラーが出たのか出ていないのか、出たならエラーは何か、というところまで返答ください。(今回は mtempaさん がその先まで進まれているので不要です)

    キャンセル

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

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

関連した質問

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