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: .shtml
This is the code so far:
<html> <head></head>
<body>
<img src="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 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/javascript/javascriptexamples/javascript-hide-image.shtml
This is the code so far:
<html> <head></head>
<body>
<img src="http://wwcdn.weddingwire./static/vendor/55001_60000/56375/thumbnails/64x64_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.
Share Improve this question edited Nov 9, 2012 at 21:09 j08691 208k32 gold badges269 silver badges280 bronze badges asked Nov 9, 2012 at 21:02 LucaSpeedStackLucaSpeedStack 5112 gold badges7 silver badges22 bronze badges 8- 2 Please add the code to the question by editing it. – juan.facorro Commented Nov 9, 2012 at 21:05
- 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 Commented Nov 9, 2012 at 21:06
- You have a function called hideImage but you're never calling it. – Eli Gassert Commented Nov 9, 2012 at 21:09
-
Do you even execute the hideImage function? (
hideImage()) – JCOC611 Commented Nov 9, 2012 at 21:09 - 2 @Kos- Read meta.stackexchange./questions/28416/… and meta.stackexchange./questions/5029/… – j08691 Commented Nov 9, 2012 at 21:13
5 Answers
Reset to default 3There are a few reasons this doesn't work
- The Image returns 404
- As other stated,
arrayis undefined - Missing ending
}after the if statement
Here is a working version in JSFiddle
Here is the JS part with ments
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 plain on things like the array variable issue.
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
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./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;
}
As a few ments (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./static/vendor/55001_60000/56375/thumbnails/64x64_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/rVnfF/
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!