EJS 文件无法识别 JavaScript 文件代码

EJS File Not Recognizing JavaScript File's Code

我正在创建一个网站,我正在使用 NodeJS 服务器。在我的 public 文件夹中,我有一个名为 website.js 的脚本,它具有 jQuery 代码,可在单击 h1 时提供 console.log。 (下面的代码)。但是当我在浏览器中单击 h1 时,它不起作用。文件加载正确,没有出现 404 错误,我的 CSS 样式表工作正常。

进一步测试:我做了一个简单的测试,看看当我调用变量时它是否会返回文本(下面的测试代码)它响应:“”(两个引号)所以它一定不能识别它.

//Test code
var xyz = $("#testh1").text();
//jQuery Code
$("#testh1").on("click", function(){
     console.log("Clicked");
});
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/javascripts/website.js"></script>
    <link rel="stylesheet" type="text/css" href="/stylesheets/website.css">
     <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="   crossorigin="anonymous"></script>
<title>test</title>
</head>
<body>

 <h1 id="testh1">TEST</h1>

</body>
</html>
  1. 您需要在脚本之前加载 jQuery。

    <script src="https://path-to-jquery"></script>
    <script src="/javascripts/website.js"></script>
    
  2. 您需要等待 DOM 准备好才能访问其中的任何元素。您可以使用以下代码执行此操作:

    $(document).ready(function() {
        $("#testh1").on("click", function(){
             console.log("Clicked");
        });
    });
    

或者将 <script> 放在 <body> 的底部而不是 <head>

    <script src="https://path-to-jquery"></script>
    <script src="/javascripts/website.js"></script>
</body>

您的测试代码中出现空字符串,因为您的 #testh1 元素尚未加载。