onclick help

**javascriptscrub** · 09-09-2010 07:33 PM

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="cursor

ointer"
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

**javascriptscrub** · 09-09-2010 07:37 PM

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

**ZZY** · 09-09-2010 07:38 PM

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

**javascriptscrub** · 09-09-2010 07:53 PM

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

**Ofekmeister** · 09-09-2010 10:17 PM

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>

**javascriptscrub** · 09-09-2010 10:55 PM

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?

**Ofekmeister** · 09-09-2010 11:11 PM

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>

**javascriptscrub** · 09-09-2010 11:23 PM

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?

**Ofekmeister** · 09-09-2010 11:30 PM

Explain EXACTLY what you want it to do please.

**javascriptscrub** · 09-09-2010 11:45 PM

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

**Ofekmeister** · 09-10-2010 12:04 AM

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>

**javascriptscrub** · 09-10-2010 12:06 AM

Awesome, it works perfectly - sorry for being unclear initially and thanks for all the help!

**Ofekmeister** · 09-10-2010 12:26 AM

Anytime

Thread: onclick help

Thread Tools

Display

onclick help

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions