Back

Technologies:

javascriptjavascript
htmlhtml
node.jsnode.js
avatar
Tolerim
a month ago

The src file path is not being detected by the Node.js app.

In my current project, I am working on a quiz application where I am attempting to include a JavaScript file in an HTML template. However, despite having the correct file path, the HTML file is unable to reference the JavaScript file when I run my node app. I have tried relocating the file, using different file paths, and embedding the JavaScript code directly into the HTML to test it, which worked successfully. For context, the app is built with Express and MongoDB. Below is the "Index.js" file, "MongoDB" file, and the "quiz.hbs" file.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
It seems like you are trying to include a JavaScript file in an HTML template in Express. Here is an example of how you can do it: 1. First, create a public folder in your project directory. 2. Inside the public folder, create another folder named "js". 3. Place your JavaScript file inside the "js" folder. 4. In your HTML file, add the following line of code inside the head tag: 
<script src="/js/your_javascript_file_name.js"></script>
5. In your Express app, add the following line of code: 
app.use(express.static('public'));
6. Restart your server and try again. This should work for you. Let me know if you have any other questions or if there's anything else I can help you with.

Sources

HTML JavaScript - W3SchoolHow to Add Custom CSS & JavaScript Files to an ExpressJS Appjavascript - How to include html files with express and ejs - Stack ...javascript - nodejs/express include local js file - Stack Overflow
avatar
Tolerim
a month ago
It seems that the issue is related to the path of the JavaScript file not being correctly referenced by the HTML file. In the quiz.hbs file, the src attribute in the script tag is currently set to "../quiz.js". This implies that the script file is located one directory level above the location of the HTML file. However, based on the project structure provided, the script file is actually located in the public directory, which is at the same level as the HTML file. To correctly reference the script file, you can change the src attribute to "./quiz.js". The . indicates that the file should be located in the same directory as the HTML file. Here is the updated code: 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Haunted Adventure Quiz</title>
  </head>
  <body>
    <div id="quiz-container">
      <!-- Quiz questions and choices will be inserted here -->
    </div>
    <button onclick="displayQuiz()">Start Quiz</button>

    <script src="./quiz.js"></script>
  </body>
</html>
With this change, the HTML file should now be able to correctly reference the JavaScript file located in the public directory.
;