CODEWITHSUNDEEP
javascripthtmlcss
user2998883
user2998883

Reputation: 13

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

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...

Upvotes: 1

Views: 1453

Answers (4)

Jonathan
Jonathan

Reputation: 773

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>

Upvotes: 0

lonesomeday
lonesomeday

Reputation: 237965

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

Upvotes: 1

Klaymen
Klaymen

Reputation: 75

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.

Upvotes: 0

Barmar
Barmar

Reputation: 781626

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>

Upvotes: 1

Related Questions