javascript function does not take effect when trying to change display property

Question

I am quite a noob for javascript so sorry for this very basic question: So i've been looking around but found no answer for this very simple question (I strongly believe its not that hard but couldn't figured out why my code doesn't work). So i try to make an Image appear after I click on another image. This is similar to what happened when you click on a picture and then the picture enlarged while making the background darker. My method is having an img inside a div container in which the div container will be on top of the page. The div container will have display:none attribute and i will use javascript to get the div ID and set the display:none to display:block. However I stumbled upon something I don't know that make my code not work. Hope anyone can help me find the problem that I wasn't aware of.

This is my Code:

HTML

enter <!DOCTYPE html>
<head>
    <?php
    header('Content-Type:text/html;Charset=UTF-8');
    ?>
    <title> Western Drive - Driving Changes </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="stylesheet.css" type=text/css>
    <link rel="stylesheet" href="testing.css" type=text/css>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js">
</head>
<body>
    <script>
        window.onload=function(){
        function preview(arg1)
        {
        document.getElementById("img1").style.display='block';
        document.getElementById("img1").src = arg1+'_Drawing.jpg';
        }
    }

</script>

<div id ="preview_image" style="display:none;">
<img id ="img1" src="Pictures/Product/SingleSpeedReducer/WPA_Drawing.jpg">
</div>
<div id="container">
    <?php include("header.php");?>
    <?php include("menu.php");?>
    <h2 id=Sub_title> Single Speed Reducer </h2>

<!----------------------------------put the content----------------------------- here-->
<div id=box style="border-top:solid 1px black ; border-bottom:solid 1px black">
<div id=pic_model><img src="Pictures/Product/SingleSpeedReducer/SingleReducer.jpg"></img></div><!-- div for pic_model-->
<div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPA.jpg"></img>  </div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPDA.jpg" onclick="preview('Pictures/Product/SingleSpeedReducer/WPDA')"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPDKA.jpg"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPDKS.jpg"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPO.jpg"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPDO.jpg"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPX.jpg"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPDX.jpg"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPKA.jpg"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPDKA.jpg"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPKS.jpg"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPDKS.jpg"></img></div>
</div><!-- div untuk box-->
<!----------------------------------end the content----------------------------- here-->
<?php include("selector.php");?>
<div class="push"></div>
</div><!--div for container-->
    <?php include("footer.php");?>
</body>


CSS

#preview_image{ position:absolute; 
width:53%; 
height:70%; 
margin:12% 10% 10% 25%; 
border:solid 3px red; 
z-index:1;}

#preview_image img{
max-height:100%;
max-width:100%;
margin:0% 0% 0% 0%;
}
#preview_image onclick{
max-height:100%;
max-width:100%;
margin:0% 0% 0% 0%;
}

When i try to click img WPDA it supposed to make the change the display:none into display:block , but nothing happened...

Some questions to consider: (1) Where is your #img1 element? I don't find it anywhere in your code, and (2) IDs have to be unique, but you have multiple instances of #pic-selector — Terry
– Terry, Commented Nov 16, 2013 at 8:58
the #img1 element is below the </script> . oh, thanks I will change the Id with class — user2998883
– user2998883, Commented Nov 16, 2013 at 10:17
I've edited your question back to the original, otherwise the answers make no sense. If you want to show your changes, add them at the end and indicate "UPDATE". — Barmar
– Barmar, Commented Nov 16, 2013 at 10:39

lonesomeday · Accepted Answer · 2013-11-16 08:57:23Z

1

I'm not going to hand-parse your code and work out every potential problem with it, but there is an obvious mistake. That mistake is related to scope. Scope means the visibility of variables and functions. There are two types of scope: global scope and function scope. Variables and functions declared within functions are visible only within the scope of that function.

Let's have a look at where you declare your handler function:

window.onload=function(){
    function preview(arg1)
    {
    document.getElementById("img1").style.display='block';
    document.getElementById("img1").src = arg1+'_Drawing.jpg';
    }
}

Do you see the problem? The function preview only exists within the scope of the anonymous function. Later you invoke it:

<img src="Pictures/Product/SingleSpeedReducer/WPDA.jpg" onclick="preview('Pictures/Product/SingleSpeedReducer/WPDA')">

Now, however, you are invoking it in the global scope. But preview doesn't exist in the global scope, so nothing will run. You will probably get an error in your browser console. If you're using Chrome, for instance, you'll see "ReferenceError: preview is not defined".

The simplest solution is simply to take the function declaration out of the onload handler. It doesn't need to be there, because the declaration itself doesn't need to wait until the page is loaded. It only needs to wait if you are looking for elements to bind the function to. Since your binding is actually done in an onclick attribute, nothing needs to wait for the DOM to be ready.

This code will probably (no promises) work:

function preview(arg1)
{
    document.getElementById("img1").style.display='block';
    document.getElementById("img1").src = arg1+'_Drawing.jpg';
}

answered Nov 16, 2013 at 8:57

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

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

3 Comments

user2998883 Over a year ago

hi! thanks for the throughout explanations, I actually use the window.onload without clearly understanding the usage, some sites told me to do that and i just follow blindly, anyway i've remove the window.onload function and still nothing...

lonesomeday Over a year ago

@user2998883 As I say, I'm not going to hand parse your page looking for errors. My life is too short! Simplify your code until you find something that does work. Learn to use the browser console.

user2998883 Over a year ago

OMG! Thanks man, i just know that there is such thing as browser console!

Barmar · Accepted Answer · 2013-11-16 08:55:49Z

1

Take the function definition out of the window.onload function. The scope of the name preview is only that function body, so it can't be referenced from the onclick handler, which is looking for a global function. Also, as pointed out in the other answers you're setting the display style of the wrong element, it should be preview_image.

<script>
    function preview(arg1)
    {
    document.getElementById("preview_image").style.display='block';
    document.getElementById("img1").src = arg1+'_Drawing.jpg';
    }
</script>

answered Nov 16, 2013 at 8:55

Barmar

789k57 gold badges555 silver badges669 bronze badges

1 Comment

user2998883 Over a year ago

Hi, thanks for the respy, i have edited the "img1" with "preview_image" and remove the window.onload function still nothing though...

Klaymen · Accepted Answer · 2013-11-16 08:56:57Z

0

Change this line

document.getElementById("img1").style.display='block';

to

document.getElementById("preview_image").style.display='block';

since preview_image is hidden not it's content.

answered Nov 16, 2013 at 8:56

Klaymen

752 silver badges10 bronze badges

Comments

Jonathan · Accepted Answer · 2013-11-16 10:49:24Z

You have to set the div display, not the image

document.getElementById("img1").style.display='block';

Becomes:

document.getElementById("preview_image").style.display='block';

EDIT:

Barmar's answer complete the game ;-)

EDIT #2:

Change all:

<div id=pic_selector>

To

<div class="pic_selector">

Then close the image tag:

<img id="img1" src="Pictures/Product/SingleSpeedReducer/WPA_Drawing.jpg"></img>

Then change your function to this:

preview = function(arg1){
    document.getElementById("preview_image").style.display='block';
    document.getElementById("img1").src = arg1+'_Drawing.jpg';
}

And move the onclick from image to div eg:

<div class="pic_selector" onclick="preview('Pictures/Product/SingleSpeedReducer/WPDA')">
    <img src="Pictures/Product/SingleSpeedReducer/WPDA.jpg"></img>
</div>

Collectives™ on Stack Overflow

javascript function does not take effect when trying to change display property

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related