実現したいこと
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}

回答1件
あなたの回答
tips
プレビュー