addEventListenerについて

javascript
1<html>
2<body>
3<p id="sample">ここをクリックすると「こんにちは」と「さようなら」を表示する</p>
4     <script>
5      function sayHello(){
6           document.write("こんにちは");
7      }
8     function sayGoodbye(){
9          document.write("さようなら");
10}
11            let p = document.getElementById('sample');
12               p.addEventListener("click", sayHello, false);
13               p.addEventListener("click",sayGoodBye,false);
14
15      </script>
16</body>
17</html>

addEventListenerを勉強中ですが、上記の記述ではクリックすると「こんにちは」が表示された後、クリックするところがないので「さようなら」を表示させることができません。document.writeの代わりにalertを用いた場合はこの２つの表示を出せたのですが、上記の記述に何を加えたらこの２つの表示を出せるのかが恥ずかしながら見当もつきません。
どなたかご教示いただけたら有難いです。

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

回答3件

上記の記述に何を加えたらこの２つの表示を出せるのかが恥ずかしながら見当もつきません。

上記の記述に追加して行うことは困難です。いったん表示が完了したあとにdocument.writeを使うと、HTMLドキュメント全体がリセットされてしまいます。

document.writeを使うのはやめて、まったく別な形で結果を出すことを考えてください。

投稿2020/02/09 07:31

maisumakun

総合スコア145184

beginner001

2020/02/09 22:17

ありがとうございました。document.writeでHTMLがリセットされるのを始めて知りました。

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

ベストアンサー

「さようなら」を表示させることができません

ご質問のコードは転記ミスでしょうか。
addEventListener のリスナに宣言されていない sayGoodBye が定義されています。

sayGoodbye ... 宣言された関数
sayGoodBye ... 宣言されていない関数。

上記の記述に何を加えたらこの２つの表示を出せるのか

イベントの挙動を把握するだけであれば、console.log() / alert() ですが、
表示を実装する場合は、DOM操作になります。

表示用の要素をマークアップしておく
動的生成するかで対応できます。

element.innerHTML += anyHTMLValue など利用できます。

DOM 操作の一例

javascript
1let getParagraph = function(id){
2  let elm = document.getElementById(id);
3  if( !elm ) {
4    elm = document.createElement("p");
5    elm.id = id;
6    document.body.appendChild(elm);
7  }
8  return elm;
9}
10
11let elm = getParagraph("greeting"); // bodyに配備

投稿2020/02/09 10:06

AkitoshiManabe

総合スコア5432

beginner001

2020/02/09 22:20

appendChild やgetparagraphは知りませんでした。勉強します。あるがとうございました。

AkitoshiManabe

2020/02/09 22:43

getParagraph は自前で作成した関数です。その中で行われる DOM の処理に着目してください。「必要ならサブルーチン(ライブラリ)を作る。」というのも開発だと思います。

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

前述にあるようにdocument.writeでもできますがビックリするくらい面倒くさいですので、
無難にappendChild等を使って出力するようにしてあげると良いんじゃないかなと思います。

js
1<html>
2<body>
3  <p id="sample" style="cursor:pointer">ここをクリックすると「こんにちは」と「さようなら」を表示する</p>
4  <div id="target"></div> <!--この中に追加 -->
5  <script>
6    'use strict';
7    const _d = document,
8          _db = _d.body,
9          _target = _d.getElementById('target'),
10          _sample = _d.getElementById('sample')
11          ;
12
13    let elm;
14
15    const say = msg => {
16      elm = _d.createElement('p');
17      elm.innerText = msg;
18      _db.appendChild(elm); //文字を #target に追加
19    }
20
21    const sayListener = () => {
22      say('こんにちは');
23      say('さようなら');
24    };
25
26    _sample.addEventListener( "click", sayListener,false); //リスナ登録
27  </script>
28</body>
29</html>