Problem loading website – JavaScript – SitePoint Forums

When I load or refresh the web, this is what I see before the site loads:

this is what loads after:

And when there is a bug, it doesn’t erase that html syntax. (I know how to fix the bug)

Hope this can be resolved; wasted so much time trying to figure it out.

This is what it looks like when I press start game:

I would hazard a guess that what is shown is the html.
Then the css is applied by the js code by assigning or modifying the classes.
When the js stops due to a bug, the screen is pretty much the same as when it started.
Is the js in a separate file?
How do you load this js file.
What else is going on, eg. read a database or other http requests. And how do you make http requests?

Html and js are in the same folder.
I open by live server (I don’t understand your question)
I didn’t make any http requests because I never learned how.

Everything else works normally and there are no explicit bugs in the console.

I added a bubble image and that contributed to the problem; still don’t know what to do.

Why not just show the code. html. js and css.
Since no bugs were detected, this is most likely a logic error. A problem with the code itself and unless we can see the code we can’t help you.
ps. When you click on a URL, you make an http request. And when the browser fetches the js and css files, the browser generates an http request. Anything received from a server is the result of an http request. In the Google Chrome debugger, there is a network tab that gives details of network activity. The cascade column gives details of when files are loaded, duration and sequence. If the sequence is not html, css and js, the page will often not display correctly.

I dumped all my code on Codepen. I don’t know how to add photos to it. so I don’t know if it will interfere with anything.

This is what I get in the console when I run the codepen;

[Warning] [THEME 513 'SP Ads'] – "To prevent errors in tests, add a `pluginId` key to your `modifyClass` call. This will ensure the modification is only applied once." (discourse-f2382e6109afa9bcf7c34b87934f48e2067d5e4bf2d8034f10989d296f12b303.br.js, line 4010)
[Error] Unrecognized Content-Security-Policy directive 'worker-src'.

[Warning] The following functions are deprecated: googletag.pubads().setTagForChildDirectedTreatment(), googletag.pubads().clearTagForChildDirectedTreatment(), googletag.pubads().setRequestNonPersonalizedAds(), and googletag.pubads().setTagForUnderAgeOfConsent(). Please use googletag.pubads().setPrivacySettings() instead. (pubads_impl_2022070601.js, line 10)
[Info] Successfully preconnected to https://c.amazon-adsystem.com/
[Error] Origin https://www.sitepoint.com is not allowed by Access-Control-Allow-Origin. Status code: 401
[Error] XMLHttpRequest cannot load https://api.rlcdn.com/api/identity/envelope?pid=72 due to access control checks.
[Error] Failed to load resource: Origin https://www.sitepoint.com is not allowed by Access-Control-Allow-Origin. Status code: 401 (envelope, line 0)
[Error] Failed to load resource: the server responded with a status of 400 () (usersync, line 0)
[Error] Unrecognized Content-Security-Policy directive 'worker-src'. (x4)

[Error] Refused to execute a script because its hash, its nonce, or 'unsafe-inline' does not appear in the script-src directive of the Content Security Policy. (6, line 0, x5)
[Error] Unrecognized Content-Security-Policy directive 'worker-src'. (x2)

[Error] Refused to execute a script because its hash, its nonce, or 'unsafe-inline' does not appear in the script-src directive of the Content Security Policy. (6, line 1)
[Error] Failed to load resource: the server responded with a status of 404 () (Bubble.jpg, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (Games.css, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (Games.js, line 0)
[Error] Refused to execute https://cdpn.io/Growly/fullembedgrid/Games.js as script because "X-Content-Type-Options: nosniff" was given and its Content-Type is not a script MIME type.
[Error] Failed to load resource: the server responded with a status of 404 () (BlackJack.jpg, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (Dealer.jpg, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (Deck.jpg, line 0)
> Selected Element
< Draw a Card
[Error] Failed to load resource: the server responded with a status of 404 () (discourse-checklist-1e07a6f8feed538735d6b92a0ab960ace8430ada4cec9ba1f112d3fdab3b9844.js.map, line 0)

I never use classes in js. Js is a prototypical language and integrating it into a class structure for me is crazy.
Call me old fashioned, but I don’t plan on learning how to use classes in js.

First of all, you’re not one for conventions, aren’t you Growly

The convention for classes is to use a label/name starting with a capital letter. You have a mix of upper and lower case tags in your code which is confusing.

For instance

function ForOwner(a) {
    a.style.backgroundImage = "url(Images/Dealer.jpg)";
    ...
    a.style.margin = "20px";
}

It looks like a constructor function to me.

I’m no OOP expert, but I tried a bit of refactoring.

class DealerAnimation {
  constructor (target) {
    this.animation = gsap.from(
      target,
      {
        opacity: 0,
        duration: 3,
        onComplete: this.deal
      }
    )
    this.message="Greetings!"
  }

  deal () {
    console.log(this.message)
  }
}

class ChatAnimation {
  constructor (target) {
    this.animation = gsap.to(
      target,
      {
        x: '300px',
        y: '-50px',
        onComplete: this.card
      }
    )

    this.message="Welcome"
  }
  // functions/methods should have a name that is 
  // a doing word. displayCard, getCard, displayMessage?
  card () {
    console.log(this.message)
  }
}

const dealerAnim = new DealerAnimation('.Owner')
const chatAnim = new ChatAnimation('.Image')

It’s good to know more about classes, but to some extent I’m with dennisjn here – I’m definitely not a fan of the “this” keyword.

Without a better review of all your code, I see no reason not to just use gsap without the to classify packaging.

const dealerAnimation = gsap.from(
  '.Owner',
  { 
    opacity: 0, 
    duration: 3,
    onComplete() {
      console.log('Greetings')
    }
  }
)

I realize this doesn’t answer your question, but sorting out your code to follow established conventions would be a good start. It would certainly make your code more understandable for anyone who wants to help you.

I’m working from the top, so maybe I’m missing something, but why not just style with css?

Instead of that.

// Owner should be lowercase owner
Owner.classList.add("Owner");
ForOwner(Owner);
function ForOwner(a) {
    a.style.backgroundImage = "url(Images/Dealer.jpg)";
    a.style.minHeight = "300px";
    a.style.backgroundRepeat = "no-repeat";
    a.style.backgroundPosition = "center";
    a.style.margin = "20px";
}
...

This one instead?

CSS

body {
  max-width: 800px;
  margin: auto;
}

.owner {
  background-image: url('Images/Dealer.jpg');
  min-height: 300px;
  background-repeat: no-repeat;
  background-position: center;
  margin: 20px;
}

.image {
  animation-fill-mode: forwards;
  height: 200px;
  margin-bottom: 30px;
  position: absolute;
  background-repeat: repeat;
}

.result {
  color: white;
  text-align: center;
  font-size: 20px;
  margin: 10px;
  display: none;
}

.card-deck {
  background-repeat: no-repeat;
  height: 75px;
  width: 50px;
  border: solid;
  display: none;
  margin-top: 30px;
  margin-left: 20px;
  background-image: url('Images/Deck.jpg');
}
...

Less JavaScript is a good thing. Less to debug, less to cheat.

Edit: Sorry if my tone is so harsh. It’s good that you’re tackling this project, I’d just deal with things like case (upper/lower case) to start with. This will make it easier for you and anyone else in the long run.

I understand, I will start all over again if I get lost in the code. ty and you are too kind.

I have organized the code now. There is an improvement in fixing the issue, i.e. the text is not getting stuck, but the bubble and dealer image are still getting stuck.

I don’t know what I did to correct the text problem.

The bubble is not bugged now, but the photo of the dealer is bugged I think?

Dealer photo flickers before animation starts when I spam refresh page? is this normal? When I don’t spam the refresh button and refresh it after the animation is done, the animation doesn’t crash.

I think it’s a glitch but idk

What do you mean by “spam page refresh”?

“reload this page”

or when I refresh spam in vscode live server.

I took a look at the code and you still seem to be using all caps everywhere.

You are using vscode, aren’t you? I have a small solution for you, which you do like.

I broke it down into steps using your code as an example

Click on Edit → replace (CTRL + H)

let (w) matches ‘let’, space and (w) matches a letter. In this case, the first letter.

Press now CTRL + Gap + L (Select all)

Then press CTRL + Gap + P and type in the ‘transform’ box and click Convert to lowercase

The next step is just to convert those ‘let’s to ‘const’

The result

I didn’t know I had to. sorry

Please don’t be sorry. These are not orders. Just wanted to show you a quick way to fix this and maybe some other changes to your code.