JavaScript preloader function isn't functioning properly when paired with a button

I'm currently working on developing a preliminary landing page for my game using JavaScript. I have integrated a class that overlays my main content, and added an 'onclick' function named fadeOut() for my button in JavaScript. However, the function is not functioning as intended.

<div id="loader1" class="loader">
  <img src="assets/zelda-quest-white.png" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate nisi ac eros auctor, sed eleifend diam dignissim. Maecenas vel viverra est, vitae volutpat enim. Pellentesque posuere fermentum volutpat. Duis laoreet porttitor dapibus. Phasellus viverra leo augu.</p>
  <button type="button" onclick="fadeOut()">Fade Out</button>
</div>

I've defined a class called .loader with an opacity transition set to 2s.

.loader {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 2s;
}

Additionally, in JavaScript:

function fadeOut() {
    const square = document.querySelector('#loader1')
    square.style.opacity = '0'
  }

This element serves as the page loader. https://i.sstatic.net/iHFYi.png

The goal is to make this content disappear upon loading so that the main content becomes visible. https://i.sstatic.net/CZuFC.jpg

javascripthtmlcss

Answer №1

After testing your function, it seems to be working correctly. Upon running the code, I noticed that the text color matched the background color, causing only a button to show up on the page initially.

To fix this issue, I included color: white; in the CSS and added 

<div>Main Content</div>
at the end of the HTML. This adjustment made the text visible after clicking the button.

.loader {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 2s;
  color: white;
}
<div id="loader1" class="loader">
  <img src="assets/zelda-quest-white.png" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate nisi ac eros auctor, sed eleifend diam dignissim. Maecenas vel viverra est, vitae volutpat enim. Pellentesque posuere fermentum volutpat. Duis laoreet porttitor dapibus. Phasellus viverra leo augu.</p>
  <button type="button" onclick="fadeOut()">Fade Out</button>
</div>

<div>Main Content</div>

<script>
    function fadeOut() {
      const square = document.querySelector('#loader1')
      square.style.opacity = '0'
    }
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Express is undefined and does not have a property called 'use'

I'm encountering a problem with my express server specifically when I utilize the 'app.use' command. Within my task-routes.js file, the following code is present: import express from 'express'; const router = express.Router(); ...

javascriptnode.jsexpress

Using http-proxy-middleware in a React application for browser proxy

I'm having trouble with setting up a proxy in my React app. Scenario: I have two React apps, one running on localhost:3000 and the other on localhost:3001. What I want to achieve is that when I click on: <a href="/app2"> <button> ...

javascriptreactjsproxyreverse-proxyhttp-proxy-middleware

Restoring styles back to the default CSS settings

I am currently working on creating visualizations using D3, and one challenge that I have encountered is the need to define a lot of styles within my code instead of in my CSS where I would prefer them to be. This necessity arises mainly to support transi ...

javascriptcssd3.js

Data manipulation with Next.js

_APP.JS function MyApp({ Component, pageProps }) { let primary = 'darkMode_Primary'; let secondary = 'darkMode_Secondary' return ( <Layout primary_super={primary} secondary_super={secondary}> <Component {...page ...

javascriptreactjsnext.js

Discover the URLs that are connected to my iframe/widget

I've crafted a widget.html page that includes a "Powered by Example.com" box or widget. Additionally, I've implemented an HTML iframe that points to this specific page (widget.html) on my website. <iframe src="http://example.com/widget.html"& ...

javascriptjqueryhtmlmysqliframe

I am looking to eliminate an object from an array based on the object's unique identifier

I am facing an issue with filtering an object based on the id in order to remove it from the array. The filter function I am using is not working as expected. My goal is to only remove the object that matches the provided id, while sending the remaining ...

javascriptreactjs

HTML and CSS: Aligning Text on the Left and Image on the Right - A Guide to Positioning Elements

Just starting out with HTML and CSS, I've run into some issues while writing my code. My goal is to have Text (on the left middle part) and image (on the right middle part) displayed side by side A responsive design that stacks the text on top of t ...

htmlcssresponsive

Photo uploading in ASP.NET MVC - encountering null HttpPostedFileBase issue

QUESTION: I'm having an issue where the Photo1 value is null in the controller post method despite uploading it. Can someone help with this? This is my model class: class ProductVM{ public string Name { get; set;} public string Color {get; ...

javascriptasp.net-mvc

Executing a cURL request using Node.js

Looking for assistance in converting the request below: curl -F <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a777f7e737b275a73777b7d7f34706a7d">[email protected]</a> <url> to an axios request if possible. ...

javascriptnode.jscurlaxioschild-process

Enhancing Angular select functionality by incorporating HTML entities using ng-option

My query is somewhat linked to this specific response, although with a slight variation. What I am aiming to accomplish is the parsing of HTML entities from a string passed onto a select using ng-options. Consider the following dataset: $scope.myOptions ...

javascriptangularjsselecthtml-entitiesng-options

Encountering the "Error: data.map is not a function" issue within Next.js

I'm having trouble understanding why this first fetch call works perfectly: async function getData() { const res = await fetch('https://jsonplaceholder.typicode.com/todos') return res.json() } export default async function Home() { co ...

javascriptreactjsjsontypescriptnext.js

Verifying a checkbox selection within an Autocomplete feature using MUI

[ { label: 'First', checked: false }, { label: 'Second', checked: true } ] Here is a brief example of how the data may be structured. I am utilizing Material UI's Autocomplete feature to enable searching based on labels. Thes ...

javascriptreactjsmaterial-ui

Seeking to develop a pair of functions for submitting data via my website's form

I need to pass form data to both Docusign and Zapier with just one button click using JavaScript. When the Submit button is pressed, I want the data to be sent to Zapier without opening a success page and then redirect to the Docusign page with all the in ...

javascripthtmljquerydocusignapizapier

Pull data from another domain's DIV using jQuery's load/ajax function

I need to load content from a different domain into a DIV on my JSP page. For example: $("#myDiv").load("https://www.google.com") The issue I'm facing is that the request is being blocked by the browser's same origin policy. I've explore ...

javascriptjqueryajaxjspcross-domain

Tips on resolving the distinct key issue in React and eliminating it

Attention all React beginners! I'm encountering an issue that states: Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `resultTable`. See https://fb.me/react-warning-keys for more information. ...

javascriptfacebookreactjs

Display all keys and values in a dynamically populated object on my screen - React

I have a dynamic object with nested objects, and I want to display every key and value. Even if there are objects within the main object, I need to show their keys and values as well. Here is an example of the object: info:{ address:{ city: {__o ...

javascriptarraysreactjsreact-native

Unresponsive Webpage

I am currently managing Facebook Ads for a client, but I have encountered an issue with their website not being responsive on mobile devices. While I have some knowledge of basic HTML & CSS, I am uncertain about how to address this particular problem. The ...

htmlcss

Arranging and structuring Handlebars templates

In this particular example... http://example.com/1 ...I am experimenting with organizing a Handlebars template and its corresponding content in separate files, as opposed to having them all combined in the HTML file or JavaScript script, like in this con ...

javascriptjqueryjsontemplateshandlebars.js

"Although the ajax request was successful, the post data did not transfer to the other

i am working with a simple piece of code: var addUser = "simply"; $.ajax({ type: 'POST', url: 'userControl.php', data: {addUser: addUser}, success: function(response){ alert("success"); } }); on the page use ...

javascriptphpjqueryajax

Enhance Your GoJS Pipeline Visualization with TextBlocks

I am facing challenges in customizing the GoJS Pipes example to include text within the "pipes" without disrupting the layout. Although I referred to an older response on the same query here, it seems outdated or not detailed enough for me to implement wit ...

javascripttypescriptgojs