CODEWITHSUNDEEP
javascriptimagehide
LucaSpeedStack
LucaSpeedStack

Reputation: 511

JavaScript Image Hide

I am making a game in javascript and I needed help with the following:

I want to make an image = to a variable then I only want to show the image when I want it too.

So I want the image by default hidden but it is always showing whatever I do. I am only a beginner and I have looked at this page and others on the internet to help me: http://www.roseindia.net/javascript/javascriptexamples/javascript-hide-image.shtml

This is the code so far:

<html> <head></head>
<body>
     <img src="http://wwcdn.weddingwire.com/static/vendor/55001_60000/56375/thumbnails/64x‌​64_SQ_1342622451725-Matangiaerial.jpg"
          id="islandimg">
     <script type="text/javascript">
     var playermoney = 10000;
     var islandarray = new array;
     var car = 500; var watch = 100;
     var diamond = 2000;
     function hideImage() { 
          if (document.getElementById) {
               document.getElementById('islandimg').style.visibility = 'hidden';
          }
     </script>
</body></html>

The code has other stuff in it for the game but ignore it.

Upvotes: 0

Views: 10740

Answers (5)

tbraun89
tbraun89

Reputation: 2234

You could use jQuery and do this:

function hideImage() {
  $('#islandimg').hide();
}


UPDATE:

An other option would be this:

function hideImage() { 
    document.getElementById('islandimg').style.visibility = 'hidden';
}

or this:

function hideImage() { 
    document.getElementById('islandimg').style.display = 'none';
}

Whats the difference between the last two => http://webdesign.about.com/od/css/f/blfaqhidden.htm

It seams you want to toggle the visible state of the image so you should create a show function too. (By using jQuery you can use the toggle() function for that.)

If you don't want to display the image you could also hide it with CSS by default and then toggle the display state with JavaScript with your showImage() function.

#islandimg {
    visibility: hidden;
}

or

#islandimg {
    display: none;
}

Upvotes: 1

Eran Medan
Eran Medan

Reputation: 45775

There are a few reasons this doesn't work

  1. The Image returns 404
  2. As other stated, array is undefined
  3. Missing ending } after the if statement

Here is a working version in JSFiddle

Here is the JS part with comments 

 var playermoney = 10000;
 var islandarray = new Array(); //array was undefined. 
 // a more concise way to write this by the way is: var islandarray = [];
 var car = 500; var watch = 100;
 var diamond = 2000;
 function hideImage() { 
      if (document.getElementById) {
           document.getElementById('islandimg').style.visibility = 'hidden';
      }
 }//Missing end braces 

 hideImage(); //missing call to the function

By the way, the easiest way to find out of these issues is to look at Chrome / Firefox console, it will complain on things like the array variable issue.

Upvotes: 3

stefano
stefano

Reputation: 606

The provious posts already answer your question. If you want to call the function where the page loads you need to insert this code:

<body onload="hideImage();">

but correct the other errors:

var islandarray = new Array();

and the final }

otherwise jscript will no load. You should use Firefox with Firebug (or other tools) to check for errors!

Upvotes: 0

Eli Gassert
Eli Gassert

Reputation: 9763

As a few comments (mine included) are suggesting, you're never actually calling the function. Here's my edit to your script

<html> <head></head>
<body>
     <img src="http://wwcdn.weddingwire.com/static/vendor/55001_60000/56375/thumbnails/64x‌64_SQ_1342622451725-Matangiaerial.jpg"
          id="islandimg">
     <script type="text/javascript">
     var playermoney = 10000;
     var islandarray = new Array();
     var car = 500; var watch = 100;
     var diamond = 2000;
     function hideImage() {
          if (document.getElementById) {
               document.getElementById('islandimg').style.visibility = 'hidden';
          }
         }
// NOW CALL hideImage() TO MAKE IT DO SOMETHING
hideImage();
     </script>
</body></html>

http://jsfiddle.net/rVnfF/

Upvotes: 1

Sushanth --
Sushanth --

Reputation: 55750

Looks like syntax errors on your page ..

var islandarray = new array;

supposed to be

var islandarray = new Array(); OR var islandarray = [] ;

Also you never seem to calling the function . you are just declaring it ..

hideImage(); // Call this function in your script 
             //  after taking care of the errors.. 

function hideImage() { 
          if (document.getElementById) {
               document.getElementById('islandimg').style.visibility = 'hidden';
          }
};  -- > Missing this as well

hideImage();  // Then call your function

check Fiddle

Upvotes: 2

Related Questions