単純なHTML&JSのはずなのですが、changeTxt is not definedとなってしまって色が変わってくれません。
index.html
1<html>
2 <head>
3 <title>色を変えよう！</title>
4 <script type="text/javascript" src="./index.js"></script>
5 </head>
6 <body>
7 <p id="text">ここを変えたい</p>
8 <ul>
9 <li><a href="javascript:void(0)" onclick="changeTxt(txtRed)">赤</a></li>
10 <li><a href="javascript:void(0)" onclick="changeTxt(txtBlue)">青</a></li>
11 <li><a href="javascript:void(0)" onclick="changeTxt(txtYellow)">黄</a></li>
12 </ul>
13 </body>
14</html>
index.js
1function changeTxt(txt){
2 document.getElementById('text').innerHTML = txt
3}
4const txtRed = '<span style="color:red">これが赤</span>';
5const txtBlue = '<span style="color:blue">これが青</span>';
6const txtYellow = '<span style="color:yellow">これが黄</span>';
7
index.js、index.htmlは共に同じフォルダ(srcフォルダ)の中にあります。
Webpackが原因なのかな？等と思っているのですが、どなたか原因がお分かりになる方がいらっしゃいましたら、何卒ご教授をお願いしますｍ（＿ ＿）ｍ
Webpack
1const src = __dirname + "/src";
2const dist = __dirname + "/dist"
3
4var webpack = require('webpack');
5const TerserPlugin = require('terser-webpack-plugin');
6const HtmlWebpackPlugin = require('html-webpack-plugin')
7
8
9module.exports = {
10 context: src,
11 // メインとなるJavaScriptファイル（エントリーポイント）
12 entry: `./index.js`,
13
14 // ファイルの出力設定
15 output: {
16 // 出力ファイルのディレクトリ名
17 path: dist,
18 // 出力ファイル名
19 filename: "index.js"
20 },
21 optimization: {
22 minimize: true,
23 minimizer: [new TerserPlugin()],
24 },
25 // モード値を production に設定すると最適化された状態で、
26 // development に設定するとソースマップ有効でJSファイルが出力される
27 mode: "development",
28 // source-map 方式でないと、CSSの元ソースが追跡できないため
29 devtool: "source-map",
30 module: {
31 rules: [
32 // Sassファイルの読み込みとコンパイル
33 {
34 test: /.scss/, // 対象となるファイルの拡張子
35 // ローダー名
36 use: [
37 // linkタグに出力する機能
38 "style-loader",
39 // CSSをバンドルするための機能
40 {
41 loader: "css-loader",
42 options: {
43 // オプションでCSS内のurl()メソッドを取り込む falseで取り込みを禁止する
44 url: true,
45 // ソースマップの利用有無
46 sourceMap: true,
47
48 // 0 => no loaders (default);
49 // 1 => postcss-loader;
50 // 2 => postcss-loader, sass-loader
51 importLoaders: 2
52 }
53 },
54 {
55 loader: "postcss-loader",
56 options: {
57 // PostCSS側でもソースマップを有効にする
58 sourceMap: true,
59 plugins: [
60 // Autoprefixerを有効化
61 // ベンダープレフィックスを自動付与する
62 require("autoprefixer")({
63 grid: true
64 })
65 ]
66 }
67 },
68 // Sassをバンドルするための機能
69 {
70 loader: "sass-loader",
71 options: {
72 // ソースマップの利用有無
73 sourceMap: true
74 }
75 }
76 ]
77 },
78 {
79 // 対象となるファイルの拡張子
80 test: /.(gif|png|jpg|eot|wof|woff|woff2|ttf|svg)$/,
81 // 画像をBase64として取り込む
82 loader: "url-loader",
83 options: {
84 // 画像のファイルサイズが 8 KB（8 * 1024 = 8192）以上だったら DataURL に変換せずに出力する
85 limit: 8192,
86 // 出力する DataURL に変換しなかった画像の名前
87 // [name].[ext] は [バンドル前のファイル名].[[バンドル前のファイルの拡張子] なので
88 // 例としては background.jpg が出力される
89 name: '[name].[ext]',
90 // DataURL に変換しなかった画像の出力先
91 // デフォルトでは output.path に指定したパス（今回は public/js）に出力される
92 // 今回は public/images に出力させたいため、public/js からの相対パスを指定する
93 outputPath: '../img/',
94 // 出力されるファイルからの画像の読み込み先
95 // 今回 public/index.html から public/img の画像を読み込みたいため、以下の指定になる
96 publicPath: path => './img/' + path
97 }
98 },
99 {
100 // Html loader
101 test: /.html$/,
102 loader: "html-loader"
103 }
104 ]
105 },
106 watch: true,
107 // ローカル開発用環境を立ち上げる
108 // 実行時にブラウザが自動的に localhost を開く
109 devServer: {
110 contentBase: dist,
111 port: 3000,
112 open: true
113 },
114 plugins: [
115 new HtmlWebpackPlugin({
116 template: "./index.html"
117 }),
118 new HtmlWebpackPlugin({
119 filename: "company.html",
120 template: "./company.html"
121 })
122 ]
123 };
Q&A
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/17 07:49