CODEWITHSUNDEEP
javascripthtml
Lord Vermillion
Lord Vermillion

Reputation: 5424

Javascript changing style display from none to normal does not work

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?

Upvotes: 3

Views: 10456

Answers (8)

dreyescat
dreyescat

Reputation: 13798

First of all, as you can deduce for the answers and comments 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 comment. Just remove the display mode.

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

Upvotes: 5

Naresh Kumar
Naresh Kumar

Reputation: 345

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.org/wikipedia/commons/c/c3/Wikipedia-logo-v2-pt.png" style=""/>

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

Upvotes: 1

vanarajcs
vanarajcs

Reputation: 978

Please try this

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

Upvotes: 1

Hans
Hans

Reputation: 9

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

Upvotes: 0

KanhuP2012
KanhuP2012

Reputation: 407

use below style

img.style.display = "block";

Upvotes: 1

Saketh
Saketh

Reputation: 93

use display "block"

img.style.display = "block";

Hope this will help you!!

Upvotes: 1

Aram Mnatsakanyan
Aram Mnatsakanyan

Reputation: 11

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";
}

Upvotes: 1

Victor
Victor

Reputation: 5121

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.org/wikipedia/commons/c/c3/Wikipedia-logo-v2-pt.png" style=""/>

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

Upvotes: 1

Related Questions