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

Question

###前提・実現したいこと
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>

Answer 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>

Comments

[meta0804]

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

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

[mtempa]

以下のコードで「test」をクリックすると、きちんとイベントは取れているように思いますが・・・。
あとは、question02.innerHTML = '近すぎます。';
の末尾のセミコロンですか？

回答の方にコードを足しました。

[meta0804]

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

[mtempa]

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

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

[meta0804]

mtempa様

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

Answer 2

//        ↓同じ変数名を使っている
      var x = document.getElementById('x');
      var x = '1. 0~50cm     ';
```同じ変数名 `x` を2回使っているからではないでしょうか。

Comments

[meta0804]

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

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

[kei344]

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