<script> src not reading correct pathname in browser

Question

For some reason I am getting this issue and I am not sure why. I've done stuff like this before, but now when I am connecting a javascript file to my HTML it is reading incorrectly. Here is the exact issue: My current running directory is

-> public
   ->js
      -app.js
      -particles.js
      -particles.json
   -index.html
   -index.css

My HTML is

<body>
<header>

</header>
<main>
<h1>Hi my name is Bob</h1>
<div id="particles-js"></div>
<!-- 
<div class="footer">
    <div class="footer-contents">
        <div id="info"> Designed and Developed by Jasmin Adzic</div>
        <div id="links"> more info</div>
    </div>
</div> -->
<script type="text/javascript" src="js/particles.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</main>
<footer>

</footer>
</body>

and in the browser I get these errors

I can get all this to work if I move every file from the js directory into the public directory and get rid of the js/ in front of the src inside the script tags, but for some reason when I put the files inside another directory and try to access the files inside the directory using script src the browser thinks i am trying to access jsparticles.js instead of js/particles.js. That is what i believe is my error. I tried researching why this is happening and yes I did look at many similar stack overflow questions but haven't had any luck finding a solution.

Ok here are the javascript files. Keep in mind im running a local server using node.js

app.js (which is running on the server)

var fs = require('fs');

var http  = require('http');
var static = require('node-static');
var url = require('url');

function static_handler(req, res) {
	req.addListener('end', function() {
		fileServer.serve(req, res, function (e, result) {
			console.log("NOT FOUND");
		});
	}).resume();
}


function createMessage(theList) {
	console.log(theList);
	console.log(theList.length);
	console.log(typeof theList);
	var message = "";
	for(var i = 0; i < theList.length; i++)	//need to put this in a callback function cus servers run syncronously 
	{
		message += theList[i];
	} 
	return message
}



function handler(req, res) {
	console.log("request url issss " + req.url);
	var url = req.url;
	if (url != '/favicon.ico') 
	{
	url = url.replace('/','');
	url = url.split('/');
	console.log(url);
	console.log(url.length);
	console.log(typeof url);

	
	    
	  	

		if(url.length >= 2)
		{//dynamic meaning we dont load up a static page
			res.writeHead(200, {"Content-type": "text/plain"});
			// var message = (url) => {for(var i = 0; i < url.length; i++)	//need to put this in a callback function cus servers run syncronously 
			

		} return message};
			var message = createMessage(url);
			
			res.write(message);
			res.end();

		}
		if(url.length == 1)
		{
			console.log("ready for next shizzz");
			fileServer = new static.Server('./public');
			static_handler(req,res);
		}
	}
}

var server = http.createServer(handler);
server.listen(port);

app.js and particles that is in the js folder is given straight from github:

https://github.com/VincentGarreau/particles.js/tree/master/demo/js and so is particles.js https://github.com/VincentGarreau/particles.js/blob/masteenter code herer/particles.js (I would've included code snippets but it exceeded the character limit on the post)

It appears the errors you see are coming from the JavaScript files. Can we see the first few lines of each JavaScript file? — Randy Casburn
– Randy Casburn, Commented Jan 31, 2019 at 19:37
This is an actual error with your script, they are all linked here just fine. If the path to the file was wrong, you wouldn't get any script errors since there would be no script to run. — Chris Barr
– Chris Barr, Commented Jan 31, 2019 at 19:39
figured it out! The script tags are taken in a requests by the server so when I was trying to access a directory the url would be parsed by the server by the'/' and the length would be 2 and when the length is 2 in my code it would do nothing giving me an error. — ThinkGPT
– ThinkGPT, Commented Jan 31, 2019 at 20:26

Maclain Anderson · Accepted Answer · 2019-01-31 19:40:00Z

1

That error looks like they are taking place inside those files. On the far right of each line, you can see this:

particles.js:1
app.js:1

This means line 1 of each of those two files has a reference to jsparticles and jsapp, which are undefined variables. Maybe those are meant to be comments you put at the top of the files? We'd have to look at those files to find out more, I think.

answered Jan 31, 2019 at 19:40

Maclain Anderson

1415 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ThinkGPT Over a year ago

i added the js files to the original post. No comments or anything. Could it be from my node.js file that is running the service. Let me know thanks :)

Maclain Anderson Over a year ago

Not really sure. I'm not familiar with node.js, but I don't see the word 'jsapp' in that app.js file anywhere, and it looks to me like the src is formatted correctly, assuming that is the correct location. I'd look for another answer from someone more familiar with node.js if you suspect that to be the issue.

ThinkGPT Over a year ago

I see, but I also realized that in my node.js file it seems to be taking in the script from the HTML as a request. Is this what it is suppose to do. I might be altering the name of the source by doing so.

Maclain Anderson Over a year ago

Yeah, I really don't know. You could use those same developer tools where you found the errors to look at the source code. This represents what the browser is delivered, which isn't necessarily what is in the source code files on the server. Just go to the 'sources' tab and look for your JS files there.

Collectives™ on Stack Overflow

<script> src not reading correct pathname in browser

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related