www.webdeveloper.com
Results 1 to 13 of 13

Thread: onclick help

  1. #1
    Join Date
    Sep 2010
    Posts
    7

    onclick help

    I am testing out some javascript:

    I have IMAGE1 where, when clicked [onclick] an [alert] appears that prompts for the user's name and then changes IMAGE1 to IMAGE2:

    function clickman()
    {
    var userName = prompt("What is your name?", "Enter your name here.");

    if (userName)
    {
    alert("Sup," + userName);
    document.getElementById("IMAGE1") .src="images/IMAGE2.gif";
    }
    }

    ...

    <body onload="alert('Welcome');">
    <div id=test1>
    <img id="IMAGE1" src="images/IMAGE1.jpg" alt="IMAGE1" style="cursorointer"
    onclick="clickman();"/>
    </div>
    </body>

    It works, but the onclick for function "clickman" still happens on IMAGE2 and will NOT occur if the user hits cancel when prompted for his/her name.

    I want it to only happen for IMAGE1, not for IMAGE2 and I need it to not be disabled if the prompt is cancelled.

    How do I fix these problems?

    Thanks

  2. #2
    Join Date
    Sep 2010
    Posts
    7
    sorry, it won't occur after the prompt is cancelled if "this.click=null" is placed in the code, otherwise it runs continuously and I don't want that either

  3. #3
    Join Date
    Jul 2010
    Posts
    71
    I didn't really inderstand the main problem but i know you can use

    Code:
    return;
    http://www.yourhtmlsource.com/javascript/functions.html

    to stop code from executing,

    Hope this helps a little

  4. #4
    Join Date
    Sep 2010
    Posts
    7
    My problem is that the prompt for the user's name can still occur even after they have done it once and IMAGE1 is now IMAGE2. I do not want them to be able to be prompted again by clicking on IMAGE2.

    Using "this.click=null" made it stop after one click like I wanted, but the problem then was that if the user hit cancel then they could not click IMAGE1 to get the prompt and see IMAGE2

  5. #5
    Join Date
    Aug 2010
    Location
    Baltimore, Maryland, United States
    Posts
    138
    Code:
    function clickman()
    {
    var x = document.getElementById("IMAGE1");
    
    do
    {
    var userName = prompt("What is your name?", "Enter your name here.");
    } while (userName == undefined);
    
    
    alert("Sup," + userName);
    
    x.src="images/IMAGE2.gif";
    
    x.removeAttribute("onclick");
    
    }
    
    ...
    
    <body onload="alert('Welcome');">
    <div id=test1>
    <img id="IMAGE1" src="images/IMAGE1.jpg" alt="IMAGE1" style="cursorpointer"
    onclick="clickman();"/>
    </div>
    </body>
    Last edited by Ofekmeister; 09-09-2010 at 10:57 PM.
    How much of human life is lost in waiting?

  6. #6
    Join Date
    Sep 2010
    Posts
    7
    Thanks, Ofekmeister - using that code fixed my initial problem just fine.

    I have, however, encountered a new problem - using Chrome and Firefox, I could not cancel out of the prompt like I was able to do before. Also, I had to change '= undefined' to '==null' or else it would always greet the user as 'undefined'.

    Using IE8, ActiveX blocks the prompt from even appearing and I am told there is an error on the page down in the status bar at the bottom of the window.

    Thoughts?

  7. #7
    Join Date
    Aug 2010
    Location
    Baltimore, Maryland, United States
    Posts
    138
    Code:
    <html>
    
    <head>
    
    <script type="text/javascript">
    <!--
    
    function clickman()
    {
    
        var x = document.getElementById("IMAGE1");
    
        do
        {
        
            var userName = prompt("What is your name?");
            
        } while (userName == "" || userName == undefined);
    
    
        alert("Sup," + userName);
    
        x.src="images/IMAGE2.gif";
    
        x.removeAttribute("onclick");
    
    }
    
    
    
    //-->
    </script>
    
    </head>
    
    <body>
    
        <div id="test1">
        
            <img id="IMAGE1" src="images/IMAGE1.jpg" alt="IMAGE1" style="cursor:pointer" onclick="clickman();"/>
            
        </div>
        
    </body>
    
    </html>
    Last edited by Ofekmeister; 09-09-2010 at 11:22 PM.
    How much of human life is lost in waiting?

  8. #8
    Join Date
    Sep 2010
    Posts
    7
    Thanks but I had all that - just posted the relevant code. Also sorry I forgot to mention that changing to (=="") makes it greet as "null" so I left it as (==null).

    Still can't cancel out of the prompt window and I think it has to do something with the "while" script (?)

    Any other suggestions?

  9. #9
    Join Date
    Aug 2010
    Location
    Baltimore, Maryland, United States
    Posts
    138
    Explain EXACTLY what you want it to do please.
    Last edited by Ofekmeister; 09-09-2010 at 11:37 PM.
    How much of human life is lost in waiting?

  10. #10
    Join Date
    Sep 2010
    Posts
    7
    My page is literally just a black and white image (IMAGE1) that when you click on it (onclick) it prompts you for your name then, as an alert, greets you and then IMAGE1 becomes IMAGE2 (a colored version of it).

    Initially, I could have continued to be prompted for my name by clicking on the image, be it IMAGE1 (if you hit cancel on the prompt - this was fine) or IMAGE2 (if you entered a name and hit OK - which I did not want). I only wanted it to happen on IMAGE1 until a name was entered and IMAGE2 was displayed instead of IMAGE1.

    I had sort of fixed the problem using "this.click" until I found that if you cancelled out of the prompt instead of typing a name and hitting OK, then you were stuck on IMAGE1 and could not re-click on IMAGE1 to be prompted for your name or see IMAGE2.

    You fixed the issue of being able to click on IMAGE2 to be prompted for your name, thanks again.

    Now, I cannot cancel out of the prompt and am forced to hit OK. So if someone accidentally clicks on the image, they must go forward with the prompt as it continues to pop up until OK is pressed. I still want the option of being able to cancel out of the prompt and re-click IMAGE1 to be prompted for a name.

    In addition, IE8 does not even launch the prompt because the page loads with errors.

    Sorry if I was unclear about this before - I appreciate the help
    Last edited by javascriptscrub; 09-09-2010 at 11:52 PM.

  11. #11
    Join Date
    Aug 2010
    Location
    Baltimore, Maryland, United States
    Posts
    138
    Works in IE8 for me, I also corrected the style part:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    
    <html>
    
    <head>
    
    <script type="text/javascript">
    <!--
    
    function clickman()
    {
    
        var x = document.getElementById("IMAGE1");
    
        var userName = prompt("What is your name?");
            
        if (userName != null)
        {
        
            alert("Sup," + userName);
    
            x.src="images/IMAGE2.gif";
    
            x.setAttribute("alt", "IMAGE2");
    
            x.removeAttribute("onclick");
            
        }
    }
    
    //-->
    </script>
    
    </head>
    
    <body>
    
        <div id="test1">
        
            <img id="IMAGE1" src="images/IMAGE1.jpg" alt="IMAGE1" style="cursor:pointer" onclick="clickman();"/>
            
        </div>
        
    </body>
    
    </html>
    Last edited by Ofekmeister; 09-10-2010 at 12:09 AM.
    How much of human life is lost in waiting?

  12. #12
    Join Date
    Sep 2010
    Posts
    7
    Awesome, it works perfectly - sorry for being unclear initially and thanks for all the help!

  13. #13
    Join Date
    Aug 2010
    Location
    Baltimore, Maryland, United States
    Posts
    138
    Anytime
    How much of human life is lost in waiting?

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