This is my imgage:

<img alt="" id="loadingImage" src="Images/ajax-loader.gif" style="display:none"/>

I want to show the image with a javascript, this is my code and it does not work:

function changeDisplay() {
    var img = document.getElementById('loadingImage');
    img.style.display = "normal";
}

HOWEVER

If i do the "inverse", going from normal to hidden it works just fine with this code:

<img alt="" id="loadingImage" src="Images/ajax-loader.gif" style="display:normal"/>

function changeDisplay() {
    var img = document.getElementById('loadingImage');
    img.style.display = "none";
}

I dont get this, what am i doing wrong?

This is my imgage:

<img alt="" id="loadingImage" src="Images/ajax-loader.gif" style="display:none"/>

I want to show the image with a javascript, this is my code and it does not work:

function changeDisplay() {
    var img = document.getElementById('loadingImage');
    img.style.display = "normal";
}

HOWEVER

If i do the "inverse", going from normal to hidden it works just fine with this code:

<img alt="" id="loadingImage" src="Images/ajax-loader.gif" style="display:normal"/>

function changeDisplay() {
    var img = document.getElementById('loadingImage');
    img.style.display = "none";
}

I dont get this, what am i doing wrong?

• javascript
• html

• 4 Please check available display values. – emmanuel Commented Nov 14, 2014 at 10:25
• 1 img.style.display = "" – Arun P Johny Commented Nov 14, 2014 at 10:26
• there is no display:"normal". developer.mozilla/en-US/docs/Web/CSS/display#Syntax – Prabhu Murthy Commented Nov 14, 2014 at 10:34

8 Answers 8

First of all, as you can deduce for the answers and ments received, there is no normal display.

Now, if when you say normal you mean to go back to the default img display mode, then you should go for display: inline. Almost all the answers assumed that block was the normal one. But img is one of the inline elements, not a block element.

function changeDisplay() {
    var img = document.getElementById('loadingImage');
    img.style.display = "inline";
}

However, if when you say normal you mean going back to the previous display mode it had before, the one calculated applying any CSS rule, then I would go for the solution proposed by @ArunPJohny ment. Just remove the display mode.

function changeDisplay() {
    var img = document.getElementById('loadingImage');
    img.style.display = "";
}

There is no display:normal, but here is one example:

    function show() {
        var img = document.getElementById('loadingImage');
        img.style.display = "inline";
    }
    
    function hide() {
        var img = document.getElementById('loadingImage');
        img.style.display = "none";
    }

<img alt="" id="loadingImage" 
src="http://upload.wikimedia/wikipedia/mons/c/c3/Wikipedia-logo-v2-pt.png" style=""/>

<a href="#" onclick="window.show()">show</a>
<a href="#" onclick="window.hide()">hide</a>

style not have display:normal; Have's display:none; Not show display:block; Show

replace img.style.display = "normal"; on This img.style.display = "block";

function changeDisplay() {
    var img = document.getElementById('loadingImage');
    img.style.display = "block";
}

use display "block"

img.style.display = "block";

Hope this will help you!!

use below style

img.style.display = "block";

Please try this

function changeDisplay() {
    var img = document.getElementById('loadingImage');
    img.style.display = "block";
}

u can use this function

function show() {    
  var contentId =
     document.getElementById("loadingImage");   // Toggle   
     contentId.style.display == "block" ? contentId.style.display = "none"
    :  contentId.style.display = "block";  }


<img alt="" id="loadingImage" 
    src="http://upload.wikimedia/wikipedia/mons/c/c3/Wikipedia-logo-v2-pt.png" style=""/>

<a href="#" onclick="window.show()">toggle</a>

it seems there is no "normal" property value for display,but you can ues "block",to show the pic up.you can find more details form w3shools