意外的令牌“<”（返回 404 html 页面而不是 .js 文件）

Question

我目前正在开发一个 node express todo list 应用程序（也使用 ejs）。我有一个过滤器 url: "/filter/query" 并使用它，我从一个类别数组中选择指定的一个： (filter/?category=lists or filter/?category=lastupdated) 然后 category = categories[...] 这是代码：

const categories = ["lists", "journals", "name", "lastmodified"];
app.get('/dashboard/filter', async (req, res) =>
{
    let category = req.query.category;
    if (category === categories[2])
    {
        res.redirect('/dashboard');

    }
    else if (category === categories[0] || category === categories[1] )
    {
        let objs = new Array();
        const journals = await Journal.find({})
        const lists = await List.find({})

        if (category === categories[1])
        {

            for (let obj of journals)
            {
                objs.push(obj);
            }
        }
        else if (category === categories[0])
        {

            for (let obj of lists)
            {

                objs.push(obj);
            }
        }
        res.render('Dashboard', { category, objs, categories })
    }
    else if (category === categories[3])
    {
        const objs = new Array();
        const journals = await Journal.find({});
        for (let obj of journals)
        {
            objs.push(obj);
        }
        const lists = await List.find({});
        for (let obj of lists)
        {
            objs.push(obj);
        }

        objs.sort(function (a, b)
        {
            var indexA = a.lastmodified, indexB = b.lastmodified
            if (indexA < indexB) //sort string ascending
                return -1
            if (indexA > indexB)
                return 1
            return 0 //default return value (no sorting)
        })
        res.render('Dashboard', { category, objs, categories })
        //res.render('Home')
    }

})

和

app.get('/dashboard', async (req, res) =>
{
    console.log("no query")
    category = categories[2];
    let objs = new Array();
    const journals = await Journal.find({})
    const lists = await List.find({})
    for (let obj of journals)
    {
        objs.push(obj);
    }
    for (let obj of lists)
    {
        objs.push(obj);
    }
    objs.sort(function (a, b)
    {
        var nameA = a.name.toLowerCase(), nameB = b.name.toLowerCase()
        if (nameA < nameB) //sort string ascending
            return -1
        if (nameA > nameB)
            return 1
        return 0 //default return value (no sorting)
    })
    res.render('Dashboard', { category, objs, categories })

})

因此，同时使用它们将呈现带有 { category, objs, categories } 的 Dashboard.ejs 文件。 如您所见，选择类别[2] 或“名称”，将重定向到默认路由，而无需任何查询字符串。 这是ejs文件：

<%- include('partials/head') %>
    <h1>Dashboard</h1>
    <h2>FilterBy:</h2>
    <% if(category) { %>
        <form action="/dashboard/filter/?category=<%=category%>" method="GET">
            <select name="category" id="category">
                <% for(let cat of categories) {%>
                    <option value="<%=cat%>" <%=category===cat ? 'selected' : '' %>><%=cat%>
                    </option>
                    <% } %>
            </select>
            <button>Enter</button>
        </form>
        <% } %>
            <% for(let obj of objs) {%>
                <li>
                    <a href="/dashboard/details/<%=obj.id%>">
                        <%= obj.name %>
                    </a>
                    <form action="/dashboard/details/<%=obj.id%>?_method=DELETE" method="POST">
                        <button>Delete</button>
                    </form>
                </li>
                <% } %>
                    <button class="togglebtn">+</button>
                    <div class="hiddennew">
                        <a href="/dashboard/newjournal">NewJournal</a>
                        <br>
                        <a href="/dashboard/newlist">NewList</a>
                    </div>

                    <script src="togglenew.js"></script>
                    <%- include('partials/footer') %>

如您所见，我附加了一个名为“togglenew.js”的脚本：

const Button = document.querySelector('.togglebtn');
const Hidden = document.querySelector('.hiddennew');

Hidden.style.display = "none";

const ClickEvent = function ()
{
    Hidden.style.display = "block";
}

const DisableClick = function ()
{
    setTimeout(() => { Hidden.style.display = "none"; }, 100);
}



Button.addEventListener('focus', ClickEvent);
Button.addEventListener('blur', DisableClick);

使用它，我可以通过“togglebutton”按钮轻松操作“hiddennew”div。 问题是：当我加载时.. 只是没有任何查询的仪表板，一切正常，按钮的行为如你所料，但是当我加载仪表板时，从 category[] 列出的任何查询看起来像脚本

<button class="togglebtn">+</button>
                    <div class="hiddennew">
                        <a href="/dashboard/newjournal">NewJournal</a>
                        <br>
                        <a href="/dashboard/newlist">NewList</a>
                    </div>

                    <script src="togglenew.js"></script>

不起作用，我在控制台中收到此错误：togglenew.js:1 Uncaught SyntaxError: Unexpected token '

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OnJournal</title>
    <link rel="stylesheet" href="/bootstrap/bootstrap.min.css ">
    <script src="/bootstrap/jquery.js"></script>
    <script src="/bootstrap/bootstrap.min.js"></script>
    
</head>
<body>
    <h1>404</h1>
</body>
</html>

我尝试了所有方法 - 没有任何效果 有谁知道如何解决这个问题？？？

Answer 1

通过替换这部分代码发现

<script src="togglenew.js"></script>

用这个：

 <script>
   const Button = document.querySelector('.togglebtn');
   const Hidden = document.querySelector('.hiddennew');

   Hidden.style.display = "none";

   const ClickEvent = function() {
     Hidden.style.display = "block";
   }

   const DisableClick = function() {
     setTimeout(() => {
       Hidden.style.display = "none";
     }, 100);
   }

   Button.addEventListener('focus', ClickEvent);
   Button.addEventListener('blur', DisableClick);
 </script>

工作得很好。 那么，这是否意味着问题在于加载文件？？