質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

581閲覧

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

beginner.js

総合スコア2

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/03/28 11:46

編集2023/03/28 13:18

実現したいこと

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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

回答1

0

ベストアンサー

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>

スクリプト実行時にはまだ .header-list li が存在しないので、実行を遅らせる必要があります。

投稿2023/03/28 21:51

int32_t

総合スコア20518

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

beginner.js

2023/03/29 02:19

できました!ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。