Javascript getElementByID Dom元素返回Null。网页包

我试图用

getElementByID

在我的DOM中获取一个元素，但我在开发控制台中不断收到一条错误消息，说

无法读取null的属性'addEventListener'

我正在使用webpack捆绑我的代码。我最初认为这是因为webpack在我的html头部注入了脚本标记，但后来通过让webpack在我的html正文的末尾注入脚本标记解决了这个问题。这样做，我仍然有问题再次发生

我已经在codepen中重新创建了我期望发生的事情，即当单击我页面上的汉堡时，将显示导航列表。基本上，我只是制作了一个红色框和一个蓝色框，当单击红色框时，蓝色框会出现或消失。它以我想要的方式工作，所以我知道这与我的网页设置有关

这是我的密码

Html

webpack.dev

const path = require("path");
const common = require("./webpack.common")
const { merge } = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");


module.exports = merge(common, {
    mode: 'development',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, "dist")
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "./index.html",
            inject: 'body'
        }),
    ],
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }
});

webpack.prod

const path = require("path");
const common = require("./webpack.common")
const { merge } = require("webpack-merge");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");



module.exports = merge(common, {
    mode: 'production',
    output: {
        filename: '[name].[contenthash].bundle.js',
        path: path.resolve(__dirname, "dist")
    },
    optimization: {
        minimizer: [
            new OptimizeCssAssetsPlugin(), new TerserPlugin(), new HtmlWebpackPlugin({
                template: "./src/index.html",
                filename: "./index.html"
            }),
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({ filename:"[name].[contenthash].css" }),
        new CleanWebpackPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            }
        ]
    }
});

webpack.common

const path = require("path");
const webpack = require("webpack");


module.exports = {
    output: {
        filename: 'main.[contentHash].js',
        path: path.resolve(__dirname, "dist")
    },
    devtool: 'source-map',
    entry: {
        main: "./src/js/index.js",
        vendor: "./src/vendor.js"
    },
    module: {
        rules: [
            {
                test: '/\.js$/',
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.html$/,
                use: ["html-loader"]
            },
            {
                test: /\.(svg|png|jpeg|gif)$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "[name].[hash].[ext]",
                        outputPath: "imgs"
                    }
                }
            }
        ]
    }
}

getElementById
表示：


它使用给定的id创建一个变量
如果多个元素具有相同的ID（这是非常糟糕的做法，不要这样做），它将选择第一项
如果没有元素具有ID，则它等于null

单击“运行代码段”按钮，然后单击“测试”，查看此错误的示例


点击按钮

测试你拼错了汉堡包。在html中，它表示“hambuger”
const path = require("path");
const common = require("./webpack.common")
const { merge } = require("webpack-merge");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");



module.exports = merge(common, {
    mode: 'production',
    output: {
        filename: '[name].[contenthash].bundle.js',
        path: path.resolve(__dirname, "dist")
    },
    optimization: {
        minimizer: [
            new OptimizeCssAssetsPlugin(), new TerserPlugin(), new HtmlWebpackPlugin({
                template: "./src/index.html",
                filename: "./index.html"
            }),
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({ filename:"[name].[contenthash].css" }),
        new CleanWebpackPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            }
        ]
    }
});

const path = require("path");
const webpack = require("webpack");


module.exports = {
    output: {
        filename: 'main.[contentHash].js',
        path: path.resolve(__dirname, "dist")
    },
    devtool: 'source-map',
    entry: {
        main: "./src/js/index.js",
        vendor: "./src/vendor.js"
    },
    module: {
        rules: [
            {
                test: '/\.js$/',
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.html$/,
                use: ["html-loader"]
            },
            {
                test: /\.(svg|png|jpeg|gif)$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "[name].[hash].[ext]",
                        outputPath: "imgs"
                    }
                }
            }
        ]
    }
}