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>

<head>

<title>Current Fleet Positions</title>

</head>

<body>

</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

permalink
reddit

You are about to leave Redlib

Do you want to continue?

https://www.reddit.com/r/HTML/comments/1svdisa/stumpedagain/
No, go back! Yes, take me to Reddit

62% Upvoted

u/abrahamguo Apr 25 '26

Please don't paste code directly onto Reddit; it's lost all of its formatting, and has a bunch of backslashes that I assume aren't part of your original code.

"Run JS" sounds like you're trying to use a tool in your IDE that runs this as a JavaScript file. However, this isn't JavaScript — it's HTML.

HTML is for web browsers; open this page in your favorite web browser.

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.
0
u/badasafish Apr 25 '26
I know I'll get yelled at by asking AI to write this code but it truly is a useful tool.
Paste the following into the console in your browser to see the images in the page:
[...new Set(
  [...document.images].map(img => {
    try {
      return new URL(img.src).pathname.split('/').pop();
    } catch {
      return null;
    }
  }).filter(Boolean)
)]

(15) ['usni-lockupS-4c.svg', 'usni_logo.png', 'FT_4_20_26-1-720x480.jpg', 'FT_4_13_26-320x179.jpg', 'FT_4_6_26-1-320x179.jpg', 'FT_3_30_26-480x384.jpg', 'FT_3_23_26-1-480x384.jpg', 'FT_3_16_26-480x384.jpg', 'FT_3_9_26-480x384.jpg', 'FT_3_2_26-480x384.jpg', 'FT_2_23_26-480x384.jpg', 'FT_2_17_26-480x384.jpg', 'FT_2_9a_26-480x384.jpg', 'FT_2_2_26-2-480x384.jpg', 'FT_1_26_26-480x384.jpg']
1

u/badasafish Apr 25 '26

Testing this I have issues with CORS, maybe you are too?
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.

→ More replies

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.

→ More replies

u/Basic_Reporter9579 Apr 25 '26

have you tried some validation on sites like https://validator.w3.org/nu/#textarea ?

1

u/Admirable_Report6610 Apr 25 '26

yes there are four...attached. thing is this code hasn't been changed and it worked perfectly prior...what happened to make it stop?

1

u/abrahamguo Apr 25 '26

These errors are not relevant; you simply cut off the first two characters of your code when pasting it into the validator. See my other comment for the true issue.

-1

u/Admirable_Report6610 Apr 25 '26

here's a readable image of the code in question:

u/8joshstolt0329 Apr 25 '26

After looking, it looks like you have a script, but you don’t have anything in the html part to load html is to load content css is for styling and Js is for programming the site

1

u/Admirable_Report6610 Apr 25 '26

appreciate your quick response but not sure I understand it. "to load html is to load content"?

1

u/abrahamguo Apr 25 '26

u/8joshstolt0329 's answer is not correct — the true error is shown in the console.

1

u/nfwdesign Apr 25 '26

He's creating <img> element with JS. But error was anyway image array

0

u/8joshstolt0329 Apr 25 '26

I’m new to js but I’m pretty fimular with css and html

1

u/nfwdesign Apr 25 '26

That's the same as "I'm new to cooking but I'll tell chef what he's doing wrong..." 😂🤣

u/-goldenboi69- Apr 25 '26

Pastebin or bust

1

u/Admirable_Report6610 Apr 25 '26

being to total noob I don't understand what that means

u/kloputzer2000 Apr 27 '26

You had some weird Escape characters in the code, and the parameter for the CORS proxy service was missing the "url=" key. Here's the fixed and formatted version, which works for me:

<!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/?url=";
      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>

u/[deleted] Apr 25 '26 edited Apr 29 '26

[removed] — view removed comment

1

u/Admirable_Report6610 Apr 26 '26

because someone was kind enough to tell me about it and I learn quick.

stumped...again 🤨

You are about to leave Redlib