scriptタグの中身を実行したいですが、できません。

実現したいこと

scriptタグの中身を実行したいです。できれば、JavaScriptやCSSも別ファイルで実行できるような仕組みにしたいです。

script機能を動作するようにする
JavaScriptやCSSを外部ファイルで動かせるようにする

前提

（例）
replitで、Node.jsを使ったゲームを作ろうと思っています。
scriptタグの中身をrunしようとしましたが、できませんでした。

具体的には、headerタグを祖先とするliタグをクリックしたときに、対応する区域(<li id="expla">なら<div id="topicexpla">というように)を表示するか非表示にするかというものです。

しかしながら、scriptタグ内が実行されず、困っています。
どこがおかしいのでしょうか。手を貸してほしいです。

また、一つのページにstyleや、JavaScriptを入れているのは、自分でやってみても、調べてみてrunしても、実行されず、無理だったからです。できれば、その問題の解決法も教えてもらいたいです。

発生している問題

views/index.ejs
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">  
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>coke clicker</title>
7　<style type="text/css">
8      .header-list li {
9        display: inline-block;
10        background-color: brown;
11        padding: 10px;
12        list-style: none;
13        font-weight: 700;
14        text-align: center;
15        
16      }
17      .header-list li:hover {
18        background-color: red;
19      }
20    </style>
21  </head>
22  <body> 
23    <header id="header">
24      <script type="text/javascript">
25         (function(){
26          const li = querySelectorAll('.header-list li');
27          for(let i = 0; i < li.length; i++){
28            li[i].addEventListener('click', e => {
29              let obj = document.getElementById('topic' + e.target.id);
30              let style = window.getComputedStyle(obj).getPropertyValue('display');
31              if(style === 'none'){
32                obj.style.display = 'block';
33              } else {
34                obj.style.display = 'none';
35              }
36            });
37          }
38        })();
39      </script>
40      <div class="header-list">
41        <ul> 
42          <li id="expla" >本サイトについて</li>
43          <li id="call">お問い合わせ</li>
44          <li id="setting">設定</li>
45        </ul>
46      </div>
47    </header>
48    <main> 
49      <div id="topicexpla" style="display: none;">
50        <h2>本サイトについて</h2>
51      <p>このサイトは、</p>
52      </div>
53    </main>
54  </body>
55</html>

index.js
1const express = require('express');
2const app = express();
3const path = require('path');
4app.use(express.static(path.join(__dirname + 'views')));
5app.get('/', (req, res) => {
6  res.render('index.ejs');
7});
8app.listen(3000, () => {
9  console.log('Server is running on port 3000');
10});

package.json
1```{
2  "name": "nodejs",
3  "version": "1.0.0",
4  "main": "index.js",
5  "scripts": {
6    "ejs": "ejs-cli --base-dir /views 'index.ejs' --out dest/"
7  },
8  "keywords": [],
9  "author": "",
10  "license": "ISC",
11  "dependencies": {
12    "@types/node": "^18.0.6",
13    "ejs": "^3.1.9",
14    "express": "^4.18.2",
15    "jquery": "^3.6.4",
16    "js": "^0.1.0",
17    "node-fetch": "^3.2.6"
18  },
19  "devDependencies": {
20    "ejs-cli": "^2.2.3"
21  },
22  "description": ""
23}

maisumakun

2023/03/28 12:02

ブラウザコンソールにエラーが出ていたりはしませんか？

beginner.js

2023/03/28 12:23

全く出ていないのです...index.jsの記述通り、"Server is running on port 3000"とは出ています...

otn

2023/03/28 13:03 編集

文法エラーだから実行されていないのでしょう。あるいは質問文のコードは、質問時のコピペミスでしょうか？

beginner.js

2023/03/28 13:09

えっと...otnさん、それはどういうことでしょうか...？何か間違っていましたか...？

otn

2023/03/28 13:15

一度書いたら、動作がおかしくてもコードの中を見ないのでしょうか？？？ 39行目を削除すれば、文法エラーはとりあえず無くなると思います。 38行目と同じなので、何らかのコピペミスだと思いますが、ファイル作成時なのか、質問掲載時なのか。

beginner.js

2023/03/28 13:17

あ...それは失礼しました...質問掲載時のコピペミスです。修正します。申し訳ございません。

回答1件

ベストアンサー

js
1      <script type="text/javascript">
2         (function(){
3          const li = querySelectorAll('.header-list li');
4...
5        })();
6      </script>

これを、以下のように変更すれば意図通りになると思われます。

js
1      <script type="text/javascript">
2        document.addEventListener('DOMContentLoaded', function() {
3          const li = document.querySelectorAll('.header-list li');
4...
5        });
6      </script>