1回のクリックでHTMLをリスト表示にしたい

実現したいこと

前提

HTMLで表示されている3種類の果物名をボタンをクリックした際に、リスト表示されるようにしたいです。イメージ説明

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

特段エラーは出ていないのですが、二度目のクリックでしかリスト表示に切り替えられません。これを一度のクリックでリスト表示にできる方法をご教示いただきたいと考えております。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Station 15</title>
8  </head>
9  <body>
10    <div id="fruits">
11      <p>リンゴ</p>
12      <p>イチゴ</p>
13      <p>ブドウ</p>
14    </div>
15    <button onclick="displayList()">リスト表示</button>
16    <script type="text/javascript" src="./scripts/station15.js"></script>
17  </body>
18</html>

JavaScript
1const change = document.querySelector("button");
2
3function displayList() {
4  const lis = document.getElementById("fruits");
5  change.addEventListener("click", () => {
6    lis.innerHTML = "<ul><li>リンゴ</li><li>イチゴ</li><li>ブドウ</li></ul>";
7  });
8}

試したこと

constなどの位置を関数の外にするなど試しましたが、うまくいきませんでした。

お助けいただけますと幸いです。
どうぞよろしくお願いいたします。

ypp

2023/02/07 06:45 編集

idがfruitsの要素がtableでは無いからでは無いでしょうか？ lis.tagName = "TABLE"にすると(おそらく)動作します。ちなみに、changeの宣言場所は、addEventListenerより前ならどこでも問題ありません。

回答2件

ベストアンサー

1回目のクリックでは onclick で指定されている displayList() が呼ばれますが、その中では addEventListener() で別の処理の登録だけを行っています。2回めのクリクでは displayList() と addEventListener() で登録された関数の両方が実行されます。

JavaScriptコードは以下のようにして、onclick は削除でよいでしょう。

js
1const change = document.querySelector("button");
2const lis = document.getElementById("fruits");
3change.addEventListener("click", () => {
4  lis.innerHTML = "<ul><li>リンゴ</li><li>イチゴ</li><li>ブドウ</li></ul>";
5});

投稿2023/02/07 06:54

編集2023/02/07 06:56

int32_t

総合スコア17923

回答へのコメント

ypp

2023/02/07 08:25

よくよくみたらイベントの登録をしているだけでしたね。。。

byamadaro1013

2023/02/07 09:29

ご回答いただきありがとうございます。こちらの方法で解決することができました。

javascript
1<script>
2function displayList(){
3  const res=[...fruits.querySelectorAll('p')]
4  .map(x=>x.textContent)
5  .reduce((x,y)=>(x.appendChild(Object.assign(document.createElement('li'),{textContent:y})),x)
6  ,document.createElement('ul'));
7  if(!fruits.querySelector('ul')){
8    fruits.innerHTML=res.outerHTML;
9  }
10}
11</script>
12<div id="fruits">
13<p>リンゴ</p>
14<p>イチゴ</p>
15<p>ブドウ</p>
16</div>
17<button onclick="displayList()">リスト表示</button>