JavaScript Image Hide

Question

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.

I have been trying for 45 mins now I still cant do it I have been looking at different articles still cant do it plz help? — LucaSpeedStack
– LucaSpeedStack, Commented Nov 9, 2012 at 21:06
You have a function called hideImage but you're never calling it. — Eli Gassert
– Eli Gassert, Commented Nov 9, 2012 at 21:09
@Kos- Read meta.stackexchange.com/questions/28416/… and meta.stackexchange.com/questions/5029/… — j08691
– j08691, Commented Nov 9, 2012 at 21:13

Eran Medan · Accepted Answer · 2012-11-09 21:46:47Z

3

There are a few reasons this doesn't work

The Image returns 404
As other stated, array is undefined
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.

edited Nov 9, 2012 at 21:46

answered Nov 9, 2012 at 21:14

Eran Medan

45.9k61 gold badges187 silver badges283 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sushanth -- · Accepted Answer · 2012-11-09 21:11:11Z

2

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

answered Nov 9, 2012 at 21:11

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

2 Comments

Kos Over a year ago

Could just as well be simply var islandarray = [];

Eran Medan Over a year ago

And also there is a missing ending } for the if statememt

tbraun89 · Accepted Answer · 2012-11-10 21:28:27Z

1

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

edited Nov 10, 2012 at 21:28

answered Nov 9, 2012 at 21:08

tbraun89

2,2343 gold badges26 silver badges47 bronze badges

6 Comments

dom Over a year ago

Sure, let's load all of jQuery to hide an image.

Kos Over a year ago

True but not helpful. You could also use a hundred other helper libraries but none are actually needed for this task

tbraun89 Over a year ago

I thought when he is developing a game this will not be the only js function and with a helper lib like jQuery he maybe can write code that is better readable.

JoshNaro Over a year ago

If he's making a game like he says, jQuery will probably be very useful for DOM manipulation.

user229044 Over a year ago

So would a thousand other libraries. The answer to a JavaScript question is not "use jQuery". Adding such a massive dependency makes this a particularly bad answer to the question as it was asked.

|

Eli Gassert · Accepted Answer · 2012-11-09 21:11:46Z

1

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/

answered Nov 9, 2012 at 21:11

Eli Gassert

9,7713 gold badges33 silver badges40 bronze badges

5 Comments

Kos Over a year ago

Don't forget the closing brace :)

Eli Gassert Over a year ago

two issues from original post. 1) new Array(); not new array; and 2) called hideImage()

LucaSpeedStack Over a year ago

You Guys Are The Best. I May Not Be Great At Coding But U Are All Great At Helping. Thanks Everyone For Helping Out!

LucaSpeedStack Over a year ago

Hi, I was just going to ask if you could help me again. I want the array Island to have the variable of how much it is worth (7,000) and and another var which is the image so later on in the code whenever I wanted to get rid of this item I could. Could you help me with this?

LucaSpeedStack Over a year ago

if anyone else could help it would be great

stefano · Accepted Answer · 2012-11-09 21:20:59Z

0

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!

answered Nov 9, 2012 at 21:20

stefano

6069 silver badges15 bronze badges

Collectives™ on Stack Overflow

JavaScript Image Hide

5 Answers 5

Comments

2 Comments

6 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

6 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related