JavaScript fail to change display property (Uncaught (in promise) TypeError: loader.style is undefin-CodePudding

I'm making a preloader of a website and I fail to hide it after few seconds. I recieve an error "Uncaught (in promise) TypeError: loader.style is undefined" I found that the javascript get null when GetElementsByClassName Here's my code:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Multiplication Table</title>
        
        <link rel="stylesheet" href="./style.css">
        
    </head>
    <body>
        
        <h1 >Multiplication Table</h1>
        <div >
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
        </div>



        <div id="webcontent">
            <label>Enter the number of rows:</label>
            <input type="number" id="number"
                onchange
                onpropertychange
                onkeyuponpaste oninput="multiplicationTable()" />

            <div id="result"></div>
            
        </div>
        <script src="script.js"></script>
    </body>
</html>

Javascript:

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}




const loader = document.getElementsByClassName('hi mosaic-loader');
console.log(loader)
sleep(3000).then(() => { hideit() });




function hideit() {
  const loader = document.getElementsByClassName('hi mosaic-loader');
  loader.style.display = "none"
}


function multiplicationTable() {
    var table;
    table='<table id="tata" >';

    var number=document.getElementById("number").value;
    for(i=1;i<=number;i  ){
     table ='<tr>';
      for(num=1;num<=number;num  ){
          table ='<td>' num*i '</td>';
       }
       table ='</tr>';
      }
    table ='</table>';
    document.getElementById("result").innerHTML = table;
    }

CSS:

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400&display=swap');
 h1 {
     display: block;
     color: white;
     font-weight: 100;
     text-align: center;
}

 body {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     min-height: 100vh;
     margin: 0;
     font-family: 'Lato';
     font-weight: 300;
     font-size: 24px;
     background: #2b2b2b;
}
 .mosaic-loader {
     --cell-size: 64px;
     --cell-spacing: 1px;
     --border-width: 1px;
     --cells: 4;
     --total-size: calc(var(--cells) * (var(--cell-size)   2 * var(--cell-spacing)));
     display: flex;
     flex-wrap: wrap;
     width: var(--total-size);
     height: var(--total-size);
}
 .mosaic-loader > .cell {
     --cell-color: white;
     flex: 0 0 var(--cell-size);
     margin: var(--cell-spacing);
     background-color: transparent;
     box-sizing: border-box;
     border: var(--border-width) solid var(--cell-color);
     animation: 1.5s ripple ease infinite;
}
 .mosaic-loader > .cell.d-1 {
     animation-delay: 100ms;
}
 .mosaic-loader > .cell.d-2 {
     animation-delay: 200ms;
}
 .mosaic-loader > .cell.d-3 {
     animation-delay: 300ms;
}
 .mosaic-loader > .cell.d-4 {
     animation-delay: 400ms;
}
 .mosaic-loader > .cell.d-5 {
     animation-delay: 500ms;
}
 .mosaic-loader > .cell.d-6 {
     animation-delay: 600ms;
}
 .mosaic-loader > .cell:nth-child(1) {
     --cell-color: #d4aee0;
}
 .mosaic-loader > .cell:nth-child(2) {
     --cell-color: #8975b4;
}
 .mosaic-loader > .cell:nth-child(3) {
     --cell-color: #64518a;
}
 .mosaic-loader > .cell:nth-child(4) {
     --cell-color: #565190;
}
 .mosaic-loader > .cell:nth-child(5) {
     --cell-color: #44abac;
}
 .mosaic-loader > .cell:nth-child(6) {
     --cell-color: #2ca7d8;
}
 .mosaic-loader > .cell:nth-child(7) {
     --cell-color: #1482ce;
}
 .mosaic-loader > .cell:nth-child(8) {
     --cell-color: #05597c;
}
 .mosaic-loader > .cell:nth-child(9) {
     --cell-color: #b2dd57;
}
 .mosaic-loader > .cell:nth-child(10) {
     --cell-color: #57c443;
}
 .mosaic-loader > .cell:nth-child(11) {
     --cell-color: #05b853;
}
 .mosaic-loader > .cell:nth-child(12) {
     --cell-color: #19962e;
}
 .mosaic-loader > .cell:nth-child(13) {
     --cell-color: #fdc82e;
}
 .mosaic-loader > .cell:nth-child(14) {
     --cell-color: #fd9c2e;
}
 .mosaic-loader > .cell:nth-child(15) {
     --cell-color: #d5385a;
}
 .mosaic-loader > .cell:nth-child(16) {
     --cell-color: #911750;
}
 @keyframes ripple {
     0% {
         background-color: transparent;
    }
     30% {
         background-color: var(--cell-color);
    }
     60% {
         background-color: transparent;
    }
     100% {
         background-color: transparent;
    }
}
 



h2, label {
    font-family: Lato;
    display: block;
    color: white;
    font-weight: 100;
    text-align: center;
}





#tata {
    font-family: sans-serif;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 1em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    vertical-align: middle;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
#tata td, #tata th {
    border: 1px solid #ddd;
    padding: 18px, 15px;
}
#tata tr:nth-child(even){background-color: #e8daef;}
#tata tr:nth-child(odd){background-color: #46a28b;}
#tata tr:hover {background-color: #a9bbc9;}

I want to make the preloader disappear after 3 seconds Anyone can help please?

CodePudding user response：

document.getElementsByClassName('hi mosaic-loader'); is wrong.

You're checking for an element which have the two classes at the same time, while the markup you shared has 1 element with class hi and one with class mosaic-loader

check https://codepen.io/napolux/pen/QWBgoZK?editors=1111

fix your markup accordingly

CodePudding user response：

Thanks for your answer, however the error still occur while "loader" is successfully log in console

My code is changed as following:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Multiplication Table</title>
        
        <link rel="stylesheet" href="./style.css">
        
    </head>
    <body>
        
        <h1>Multiplication Table</h1>
        <div >
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
        </div>



        <div id="webcontent">
            <label>Enter the number of rows:</label>
            <input type="number" id="number"
                onchange
                onpropertychange
                onkeyuponpaste oninput="multiplicationTable()" />

            <div id="result"></div>
            
        </div>
        <script src="script.js"></script>
    </body>
</html>

JS:

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}



sleep(3000).then(() => { hideit() });




function hideit() {
  const loader = document.getElementsByClassName('mosaic-loader');
  console.log(loader)
  loader.style.display = "none"
}


function multiplicationTable() {
    var table;
    table='<table id="tata" >';

    var number=document.getElementById("number").value;
    for(i=1;i<=number;i  ){
     table ='<tr>';
      for(num=1;num<=number;num  ){
          table ='<td>' num*i '</td>';
       }
       table ='</tr>';
      }
    table ='</table>';
    document.getElementById("result").innerHTML = table;
    }

Console:

HTMLCollection { 0: div.mosaic-loader, length: 1 }
Uncaught (in promise) TypeError: loader.style is undefined
    hideit file:///C:/Users/Kyrus/OneDrive - KW/Documents/VSCode/Multiplication-Table/script.js:15
    <anonymous> file:///C:/Users/Kyrus/OneDrive - KW/Documents/VSCode/Multiplication-Table/script.js:7
    promise callback* file:///C:/Users/Kyrus/OneDrive - KW/Documents/VSCode/Multiplication-Table/script.js:7