What steps should I take to resolve the issue of missing files on my local website?

While working on my pokedex project using HTML, CSS, and JavaScript, I encountered an issue. When I try to open the project in VSCODE, everything works perfectly fine. However, when attempting to open the HTML file locally in a browser, it fails to find two local files with the following error messages:

file:///C:/assets/js/poke-api.js net::ERR_FILE_NOT_FOUND GET file:///C:/assets/js/main.js net::ERR_FILE_NOT_FOUND

It is puzzling that the files are functional when accessed through VSCODE.

https://github.com/joaogabriel1902/Pokedex-Challenge - Feel free to check out the code here.

I attempted to troubleshoot by uninstalling some extensions but unfortunately, the issue persists. The browser still cannot locate the necessary files.

javascripthtmlcss

Answer №1

The solution lies within the error message

GET file:///C:/assets/js/poke-api.js net::ERR_FILE_NOT_FOUND 
GET file:///C:/assets/js/main.js net::ERR_FILE_NOT_FOUND

Your browser should not be searching in C:/assets, unless you intend for it to access the root folder of your hard disk instead of the project folder (which contains "assets").

Something seems amiss with how you've instructed the browser to load the project. Here are some steps you can try:

  1. Use Google Chrome

  2. Drag the ".html" file from your explorer window into a Google Chrome window.

This action should prompt Chrome to correctly open the HTML file.

Accessing files in subfolders

I have found two methods that work for me:

<script src="./assets/js/main.js"></script>

or

<script src="assets/js/main.js"></script>

If I attempt a third method, however, I encounter an error message similar to yours:

<script src="/assets/js/main.js"></script>

Testing a possible solution

Your code appears to use a working method on my system, so it's puzzling why you're facing an error. Perhaps consider trying the other method that works for me to see if it resolves the issue?

Remove the ./ when referencing the JavaScript files, changing

<script src="./assets/js/main.js"></script>

to this

<script src="assets/js/main.js"></script>

I'm interested in hearing about your progress as well, so please keep me updated.

Answer №2

Try using this code snippet:

<script src="../assets/js/main.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using a text box in jQuery to perform basic calculations is a straightforward process

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Creating a Lens Calculator Web App</title> <link href="http://code.jquery.com/mobile/1.0a3/jque ...

javascriptjquery

Navigating Express HTTP Requests within Apollo Link Context in a NextJS Web Application

Currently, I am in the process of developing a NextJS application and facing a challenge with accessing a cookie to utilize it for setting a Http Header within a GraphQL Request. For this task, I am integrating apollo-link-context. Below is the snippet of ...

javascriptexpressnext.jsapollo-client

Is it possible to modify the div id using C# code behind?

I have a division that looks like this: <div id="divAdditionalInfo" runat="server"> //html code here </div> In the back-end code, I want to display a small window (generated by this div) more than once. However, since it's the same div, ...

c#htmlcode-behind

Tips for waiting for image to finish loading from success data of an ajax() call?

I am utilizing the jquery ajax() function: $.ajax({ type: "POST", url: 'ajax.php', data: 'url='+variable, success: function(data){ $('#mydiv').html(data); } }); The ajax response (data variable) I ...

javascriptjqueryajaxload

Retrieving data synchronously from a Promise with Angular

I am looking to display the product history by retrieving the id of the product from the ActivatedRoute.params. In the ngOnInit method, I need to fetch all the historical records of the product and store them in a variable. Afterwards, I want to merge the ...

javascriptangularasynchronouspromise

Using Node Express.js to access variables from routes declared in separate files

Currently, I am in the process of developing a website with numerous routes. Initially, all the routes were consolidated into one file... In order to enhance clarity, I made the decision to create separate files for each route using the Router module. For ...

javascriptnode.jsexpress

putting a division element above a image carousel

Is there a way to overlay a div tag on top of a slideshow, similar to the one shown in this link? In the example provided, a div with the title "DISCOVER THE JOY OF COOKING" is positioned over a slideshow. Any tips on how I can achieve this effect? ...

htmlcss

Need help: Autocomplete feature not working for two fields

I am currently working on implementing an autocomplete feature on two textboxes. The idea is that when a value is selected in one of the textboxes, another value should automatically appear in the other textbox. To better illustrate this concept, let me pr ...

javascriptphpjquerymysqlautocomplete

What is the method for including a dynamic image within the 'startAdornment' of MUI's Autocomplete component?

I'm currently utilizing MUI's autocomplete component to showcase some of my objects as recommendations. Everything is functioning correctly, however, I am attempting to include an avatar as a start adornment within the textfield (inside renderInp ...

javascriptreactjsarraystypescriptmaterial-ui

Increase the number of table rows as you scroll downwards

Hello everyone! I've been searching online for information on how to implement infinite scrolling in a table, but all I found were tutorials using divs. Can someone please provide guidance on how to achieve this? Perhaps a sample code snippet or tuto ...

javascriptphpajax

How to Adjust the Padding of Tree Row in GWT?

Have you ever seen a GWT tree before? It sort of resembles the following structure: <div class="gwt-Tree"> <div style="padding-top: 3px; padding-right: 3px; padding-bottom: 3px; margin-left: 0px; padding-left: ...

javacssgwttree

calling the setState function multiple times

I keep calling the setState function multiple times in a row by pressing the down button, but I noticed that React JS stops updating the state after around 40-50 updates. Each click increases the sold value by one. Is this normal behavior for React JS, or ...

javascriptreactjs

Send the selected dropdown value to two separate PHP pages without using JavaScript

I am specifically looking for PHP programming, not JavaScript. My requirement is to have a dropdown menu containing 15 weeks. When a user selects a week from the dropdown, they should be redirected to a page that displays a message saying: Welcome! You h ...

phphtml

Rapid polygon merging with JavaScript

I have a large geoJSON file containing polygons and multi-polygons, totaling 2.5 MB in size. My goal is to merge all these shapes to display them on a map within a web browser environment. In my Python workflow, I am using shapely.ops.unary_union which p ...

javascriptpolygongeojsonshapelyturfjs

Tips for creating a responsive background image without excessive scaling:

I'm currently working on a website with a focus on responsibility, and I've incorporated 'waves' SVG images as a background-image. The issue arises when viewing the site on smaller screens, such as mobile devices, where the background a ...

htmlcssbackgroundbackground-image

Is there a way to create a text section, or a similar feature, that comprises multiple lines of text as separate elements?

It's similar to what you see in the image - where each line represents an item. ...

htmlbootstrap-4frontend

Upgrade from using a switch statement to a more robust pattern in JavaScript

I am looking to enhance my app by dynamically displaying pages based on a user's type and role properties. Currently, I am using a simple switch statement that determines the view based on the user's type, like this: switch(type) { case ' ...

javascriptdesign-patterns

Scrolling does not function properly on Android devices when utilizing skrollr.js in conjunction with multiple div elements containing the id "skrollr-body."

Having trouble with the scroll functionality in my skrollr.js animations. Everything works fine on desktop, but when I checked the rendered HTML in the browser console, I noticed that there are two divs with the same id "skrollr-body". One is empty and the ...

javascriptjqueryhtmlcssskrollr

Identify the descendant of the `<li>` tag

I need help creating a interactive checklist. The idea is that when you click on an item in the list, a hidden child element should become visible. <div id="list_one"> <h2>LIST TITLE</h2> <div id="line"></div> < ...

javascriptjqueryhtmlcss

Ways to manage properties that are non-existent

Whenever vm8 encounters a property that doesn't exist, it will display an error message like this: Cannot read property 'value' of null. For example, when passing an id that doesn't exist: var pass = document.getElementById('pass ...

javascript