Dog app/API button issue

JavaScript
1

Hello. I’m making a dog image refreshing app and it works but the button I made goes away. I think it’s my screen size. I have a 17" screen so maybe that’s the issue. Other than that, tips on this would be nice but it fully works.

https://replit.com/@DanielPetroski/API-Demo#script.js

Thanks

2

The button is inside the dogImage div and you are overwriting its content. Move the button out of that div (also the script element doesn’t really belong inside a div and you are missing the closing body tag).

BTW, as I said in another post try not to post the Replit link directly because the forum embeds it, and if it fails no one can see the code. Just wrap the link in a code block or make it a link

https://replit.com/@DanielPetroski/API-Demo

or

API-Demo

1 Like
3

Got it working. And you were right about the button placement/movement. However, the button needed to placed a line about the script tag. Otherwise it doesn’t work properly.

Updated dog API

4

And of course thank you.

5

Anything in the DOM that is used in the JS can not be loaded after the JS.

There are a few ways of dealing with it. Here are four different ways.

  1. Load the script after all the HTML content, usually right before the closing body tag.

  2. Use the defer attribute on the script element. Then it can be located before the HTML content as it will be executed after the document has been parsed.

<script defer src="main.js"></script>
  1. Make the script a module, as they are deferred by default.
<script type="module" src="main.js"></script>
  1. Use the DOMContentLoaded event and wrap all the code inside the event handler. The code will run after the document has been parsed.
document.addEventListener('DOMContentLoaded', () => {
 // app code
});
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.