Javascript DIV Not Displaying After Changing CSS-CodePudding

I have a DIV for spinner:

<div id="spinner" style="display:none;z-index:100;position:absolute;top:50%;left:50%;margin-top:-50px; margin-left:-50px;">
     <img src="..\spinner.gif" alt="Loading" />
</div>

The code document.getElementById("spinner").style.display = "block" changes the style of the spinner to block but the spinner div not showing:

document.getElementById("spinner").style.display = "block";

getAllStudents(); //this function gets data from MySQL tables and populate a table on the page

document.getElementById("spinner").style.display = "none";

CodePudding user response：

Instead of adding display: none; after the function call, try adding the code just before you start populating the table on page.

document.getElementById("spinner").style.display = "none";

CodePudding user response：

Two Ideas:

If the image src is incorrect, I've sometimes found it doesn't display anything, even with an alt = "Loading" tag. You might want to test the link it's displaying the image from to verify it works. (Don't just test the src link).
Assuming the image src is correct, you could remove the image from <div id="spinner"/> and add it separately as <img id="spinner" src="..\spinner.gif" alt="Loading" /> and then you could have your <div show what you want.

EDIT: (3 ideas now)

Change your src attribute so all of the \ characters are replaced with /. I tried an image in my own script with src = "..\spinner.png" and it wouldn't even run, but doing src = "../spinner.png" did. Hopefully this solves your problem.