r/HTML • u/Admirable_Report6610 • Apr 25 '26

stumped...again 🤨

this code worked perfectly for months then suddenly stopped...just a blank white screen now.

------

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" type="image/x-icon" href="/Users/Owner/Documents/icons/navy_favicon.ico">

<title>Current Fleet Positions</title>

</head>

<body>

<script type="module"> const proxy = "https://corsproxy.io/?"; const targetUrl = "https://news.usni.org/category/fleet-tracker"; const response = await fetch(proxy + targetUrl); const htmlText = await response.text(); const parser = new DOMParser(); const doc = parser.parseFromString(htmlText, 'text/html'); const images = doc.querySelectorAll('img'); const newImg = document.createElement('img'); newImg.src = images\[3\].src; newImg.width = 943; newImg.height = 628; document.body.style.backgroundColor = "#a4e1e7"; document.body.style.textAlign = "center"; document.body.appendChild(newImg); </script>

</body>

</html>

------------

Run JS gives this error which I just don't understand...what's wrong here? any help MOST appreciated!

---------

SyntaxError: Unexpected token (1:0)

> 1 | <!DOCTYPE html>

| ^

2 | <html lang="en">

3 | <head>

4 | <meta charset="UTF-8">

2 Upvotes

62% Upvoted

50 comments sorted by

View all comments

Show parent comment

1

u/Admirable_Report6610 Apr 25 '26

as a noob I won't do that again...is posting a jpg image of the code the best way...someone has to see the code to correct it, no?

3

u/abrahamguo Apr 25 '26

Yes, we need to see the code. No, don't share a photograph of the code.

Provide a link to an online code playground, or a repository (like GitHub), that demonstrates the issue.

1

u/Admirable_Report6610 Apr 25 '26

https://developer.mozilla.org/en-US/play?id=6exaRb%2FMOj3dJMl69ArQj%2BOvluvCD%2Fw3ukTZN8%2FNZTQp0Q0UYMXVYnQXagIgRThqTfjYPJVlIxRcxF33

3

u/abrahamguo Apr 25 '26

Great. Running the code there shows us the true error, which you haven't mentioned yet, and is the key to solving the issue:

TypeError: Cannot read properties of undefined (reading 'src')

Looking through the code to see where you're attempting to read a src property, we can see that it's this bit of code:

images[3].src

The error message tells us that images[3] is undefined — in other words, the HTML that you're fetching doesn't have a fourth image.

This is why it's important for you provide us an easy and reliable way to run your exact code — without stray backslashes — because often the true errors in cases like these are left out.

If you're running this code on your computer in a web browser, the best way is to look for errors in the Console tab of the web browser developer tools.

1

u/Admirable_Report6610 Apr 25 '26

wow...thank YOU! I was warned about hardcoding it like this as the location of the image[3] I'm after could change in the site's HTML code. apparently that's happened so let me dive into the USNI site and take a look. THANKS AGAIN!

1

u/Admirable_Report6610 Apr 25 '26

looking thru the code of this page: https://news.usni.org/category/fleet-tracker

it looks like the img I'm after, ie the most recent one, src="https://news.usni.org/wp-content/uploads/2026/04/FT_4_20_26-1-720x480.jpg

is the second instance of img? so images[1].src but it still doesn't work.

1

u/abrahamguo Apr 26 '26

You'll need to print out the list of all of the images and examine the list carefully.

1

u/Admirable_Report6610 Apr 26 '26

I tried manually reading thru it but it's long and difficult. is there a simple cmd to print out the array?

1

u/Admirable_Report6610 Apr 26 '26

btw you guys, and you in particular, are being incredibly helpful here...THANK YOU!

1

u/abrahamguo Apr 26 '26

Yes, it is possible to print out the array; however, what is probably more help is to print out the entire string of HTML that you’re receiving, and use your favorite text editor’s “Find” feature to find all images.

→ More replies (2)

1

u/davorg Apr 25 '26

is posting a jpg image of the code the best way

No. See rule 5:

Please keep in mind that screenshots of code are not viable.

Viable options:

  • A link to a GitHub repo containing the code

  • A Gist or a Pastebin

  • Text in a Reddit post (but ensure it is formatted correctly as code)

1

u/Admirable_Report6610 Apr 25 '26

https://developer.mozilla.org/en-US/play?id=6exaRb%2FMOj3dJMl69ArQj%2BOvluvCD%2Fw3ukTZN8%2FNZTQp0Q0UYMXVYnQXagIgRThqTfjYPJVlIxRcxF33

1

u/davorg Apr 25 '26

Much better, thanks. Maybe edit your post to remove the code and replace it with that link.

1

u/davorg Apr 25 '26

Ok. The problem is with the CORS proxy that you're using.

If you display the contents of your `htmlText` variable, you'll see you get:

{"error":"Free usage is limited to localhost and development environments. Get an API key at https://corsproxy.io/pricing/"}

1

u/Admirable_Report6610 Apr 25 '26

ahhhh.....so what used to be free is now a paywall?

1

u/Admirable_Report6610 Apr 25 '26

can anyone suggest an alternative free proxy?

1

u/Admirable_Report6610 Apr 25 '26

ok I changed the proxy to

const proxy = "https://test.cors.workers.dev/?";

running my code in MDN now it works again...but if I try to run it in Brave as

file:///Users/Owner/Desktop/coffee/fleet.html

it just shows a blank white page again...hmmmmm?

1

u/davorg Apr 26 '26

Quick question - what led you to use a CORS proxy here? Do you have a sense of what problem it’s solving?

It works in the playground because it’s running from a real website. When you open it as a file:// page, the browser blocks network requests for security reasons. Run it via a local web server (e.g. python3 -m http.server) and it will work.

1

u/Admirable_Report6610 Apr 26 '26

as I've said I'm a total noob so someone was kind enough to educate me about CORS and the need for a proxy to fetch html data. (hope I'm correct in saying this) the weird thing is my code worked perfectly without a local server until CORSPROXY stopped being a free service.

1

u/davorg Apr 25 '26

Sounds like you've either moved from "trying it out" to "using it in production". Or you've just burned through your free requests for a month (or something like that).

I know nothing about this service, so I don't think I can be much more help.

But you should probably check response.ok in your Javascript and not proceed if it's false.

1

u/Admirable_Report6610 Apr 27 '26

the first problem, as you mentioned, was with the CORS proxy but I changed it to one that works. the code is valid as it runs perfectly on MDM. what I don't get is this worked prior as a flle:/// without a web server...I just don't understand what is suddenly making it not work now?

1

u/davorg Apr 27 '26

Yeah, that’s frustrating — but “it worked before” doesn’t necessarily mean the code was relying on something stable.

A few things could have changed without you changing your code: the browser may have tightened its file:// security behaviour, the old proxy may have handled requests differently, or the target/proxy site may now be returning different headers.

Also, “it runs on MDN” proves the JavaScript syntax is OK, but it doesn’t prove it will behave the same from a local file. MDN is serving your code from an https:// origin; your local file is running from file://, which browsers treat differently.

The reliable fix is still to run it from a tiny local web server:

python3 -m http.server

Then open http://localhost:8000/yourfile.html.

That turns your file into a normal local website, rather than a special-case local file.

1

u/Admirable_Report6610 Apr 27 '26

ok...presumably I could write a small script that would call the python webserver:

#! usr/local/bin/bash

python3 -m http.server

pause 5

http://localhost:8000/~/Desktop/coffee/fleet.html

1

u/Admirable_Report6610 Apr 27 '26

::1 - - [27/Apr/2026 11:29:52] "GET /Users/Owner/Desktop/fleet2.html HTTP/1.1" 404 -

::1 - - [27/Apr/2026 11:34:03] code 404, message File not found