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

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

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

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

Q&A

解決済

1回答

1082閲覧

HTMLから.js外部ファイルのイベントリスナ(DOMContentLoaded)をセットする方法を教えてください。

jonny441d3

総合スコア9

HTML5

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

0グッド

1クリップ

投稿2020/07/05 21:47

前提・実現したいこと

プログラミング初心者です。
WEBページのサンプルコードを参考にしながらJavaScriptを使用したタブの切り替えを実装したいと思っています。

直接phpファイルにJavaScriptを記述した場合は正しく動作しますが、
外部ファイルとして読み込む時が上手くいきません。

外部ファイルでDOMContentLoadedのイベントリスナを実装するにはどのような書き方をすれば宜しいでしょうか。

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

外部ファイルに分けたイベントリスナ(DOMContentLoaded)が実装できない

該当のソースコード

[sample01.php]

php

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"> 7 <title>Document</title> 8 <link rel="stylesheet" type="text/css" href="cssSample01.css"> 9</head> 10<body> 11 12<?php 13//切り替えタブ 14echo '<p><h2>切り替えタブ</h2></p>'; 15echo '<div class="box1">'; 16 17echo 18'<div class="panel> 19 20<ul class="tab-group"> 21<li class="tab tab-A is-active">タブ1</li> 22<li class="tab tab-B">タブ2<li> 23<li class="tab tab-C">タブ3<li> 24</ul> 25</div> 26 27<div class="panel-group"> 28<div class="panel tab-A is-show">コンテンツ1</div> 29<div class="panel tab-B">コンテンツ2</div> 30<div class="panel tab-C">コンテンツ3</div> 31</div> 32 33</div>'; 34 35echo '</div>'; 36?> 37<!--JavaScript読み込み--> 38<script src='changeTab.js'></script> 39 40</body> 41</html>

[changeTab.js]

JavasCript

1document.addEventListener('DOMContentLoaded', function(){ 2 // タブに対してクリックイベントを適用 3 const tabs = document.getElementsByClassName('tab'); //ノードを取得 4 for(let i = 0; i < tabs.length; i++) { //繰返し構文で全てに適用 5 tabs[i].addEventListener('click', tabSwitch); 6 } 7 8 // タブをクリックすると実行する関数 9 function tabSwitch(){ 10 // タブのclassの値を変更 11 document.getElementsByClassName('is-active')[0].classList.remove('is-active'); //is-activeの追加 12 this.classList.add('is-active'); //is-activeの削除 13 // コンテンツのclassの値を変更 14 document.getElementsByClassName('is-show')[0].classList.remove('is-show'); 15 const arrayTabs = Array.prototype.slice.call(tabs); //引数にとったオブジェクトを配列に変換してくれます。 16 const index = arrayTabs.indexOf(this); //配列に対してだけ使い、DOMを引数にとって一致した要素番号を戻します。 17 document.getElementsByClassName('panel')[index].classList.add('is-show'); 18 }; 19});

[cssSample01.css]

css

1.tab{ 2 flex-grow: 1; 3 padding:5px; 4 list-style:none; 5 border:solid 1px #CCC; 6 text-align:center; 7 cursor:pointer; 8} 9.panel-group{ 10 height:100px; 11 border:solid 1px #CCC; 12 border-top:none; 13 background:#eee; 14} 15.panel{ /*非表示にさせます*/ 16 display:none; 17} 18.tab.is-active{ /*tabを上書きして発火させます*/ 19 background:#F00; 20 color:#FFF; 21 transition: all 0.2s ease-out; 22} 23.panel.is-show{ /*panelを上書きしてこれだけ表示させます*/ 24 display:block; 25}

試したこと

JavaScript読み込みではなく直接sample01.phpに記述した場合は動きます。

補足情報(FW/ツールのバージョンなど)

参考にしたHP: https://qiita.com/savaniased/items/41af6bb4023414ae16f8

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

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

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

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

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

maisumakun

2020/07/05 22:12

ブラウザのコンソールにメッセージなどは出ていませんか?
jonny441d3

2020/07/06 08:19

ありがとうございます! 無事に解決いたしました。 プログラム以前のミスでお恥ずかしい限りです(汗)
guest

回答1

0

ベストアンサー

試した範囲では想定通りの動作をしているように見えます。

投稿2020/07/06 01:10

yambejp

総合スコア116311

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

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

jonny441d3

2020/07/06 08:18

解決いたしました! 正しいディレクトリに配置されていなかったというなんともお恥ずかしいミスでした。 使用しているエディタのファイルツリーが視覚的に紛らわしく、 別の場所にあることに気がつかなかった事が原因です。 これを機にプラグインを考える事に致します。 お騒がせしてすみませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.38%

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

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

質問する

関連した質問