www.webdeveloper.com
Results 1 to 6 of 6

Thread: .onclick won't work

  1. #1
    Join Date
    Aug 2012
    Posts
    6

    .onclick won't work

    Hi

    I'm stuck with a code that I just can't get to excecute

    I'm trying to change the visibility on <div id="one"> from hidden to visible, when my image <img src="supervip.png" id="supervip" /> is clicked.
    (The div is set to hidden in the style sheet)

    This is my script that I put in the head-tag:
    <script type="text/javascript">
    var supervip=document.getElementById("supervip");
    var one=document.getElementById("one");
    supervip.onclick=one.style.visibility="visible";
    </script>

    I've also tried it with variations of functions, and I also tried to make the image clickable in the html and calling a function, like this <img src="supervip.png" id="supervip" onclick="function ()" />

    Nothing works and I'm guessing I missed something really basic.... like a fundamental rule of javascript...

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    You can't put the script in the head tag unless your going to execute it when the document has finished loading:

    Code:
    <script type="text/javascript">
    
    	window.onload = function()
    	{
    		var supervip = document.getElementById("supervip");
    		var one = document.getElementById("one");
    		supervip.onclick = function()
    		{
    			one.style.visibility = "visible";
    		};
    	};
    
    </script>
    or simply done without using variables:

    Code:
    <script type="text/javascript">
    
    	window.onload = function()
    	{
    		document.getElementById("supervip").onclick = function()
    		{
    			document.getElementById("one").style.visibility = "visible";
    		};
    	};
    
    </script>
    Last edited by bionoid; 08-01-2012 at 02:16 PM.
    JavaScript: Learn | Validate | Compact | bionoid

  3. #3
    Join Date
    Aug 2012
    Posts
    6
    Worked perfectly.. Thanx a million!!!

    I, however, managed to give myself a new problem...

    I want the rest of the page to get darker when an image is open, so I added a black <div id="background"> width 50% opacity to the html. I put it below the images, but above the rest of the content. I made it hidden and wanted i to be visible when you click the image, so I wrote that in the supervip.onclick function like this:

    document.getElementById("supervip");
    document.getElementById("background");

    supervip.onclick = function() {
    background.style.visibility = "visible";
    one.style.visibility = "visible";
    };

    The problem is that the new <div> also covers the image, even though I put it below the image in the html... I've also tried to change the order whitin the function without result.


    Alway stuck with something... Thanx again!!!

  4. #4
    Join Date
    Aug 2012
    Posts
    3
    Using z-index might fix your problem.
    http://www.w3schools.com/cssref/pr_pos_z-index.asp

  5. #5
    Join Date
    Aug 2012
    Posts
    6
    What would I do without you?! :*

  6. #6
    Join Date
    Jun 2012
    Posts
    10
    z-index should work.

    Have you tried looking into using jquery for this? there is a jQuery plugin that does this for you. it's called ui.blocker

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles