NewWebDesigner
asked on
why is my function firing automatically instead of onclick?
I need a double click on the input area to trigger the function and display 'pic1'. Right now, the code fires when the page loads. What is wrong? Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function initPage() {
document.getElementById("input1").ondblclick= insertPicture('pic1');
}
function insertPicture(a) {
window.alert(a);
}
</script>
</head>
<body onload="initPage()">
<input id="input1" type="text"></input>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
ASKER
couldn't get it to work
The mod below works:
Passing the string 'pic1' from the " initPage()"
function caused the script to fail.
I would suggest to use a fixed variable in
the "insertPicture()" function.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function initPage() {
document.getElementById("i
}
function insertPicture() {
window.alert(document.getE
}
</script>
</head>
<body onload="initPage();">
<input id="input1" type="text" value='pic1'></input>
</body>
</html>
Passing the string 'pic1' from the " initPage()"
function caused the script to fail.
I would suggest to use a fixed variable in
the "insertPicture()" function.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function initPage() {
document.getElementById("i
}
function insertPicture() {
window.alert(document.getE
}
</script>
</head>
<body onload="initPage();">
<input id="input1" type="text" value='pic1'></input>
</body>
</html>
NewWebDesigner, what isnt working for you? It appears both experts1 and i have same design approach. Either should work. The only difference b/n the two is where javascript is placed.
I didnt look at the other approaches in detail yet, but this works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function initPage() {
document.getElementById("input1").ondblclick= function(){ insertPicture('pic1') };
}
function insertPicture(a) {
window.alert(a);
}
</script>
</head>
<body onload="initPage()">
<input id="input1" type="text"></input>
</body>
</html>
gregg_s sample should work fine too. experts1 sample will work but its a different approach.
About the code, the addEvent method is a way to do as you are trying above. It is essentially the same thing. You can attach an event like the double click to an element calling the addEvent method.
In the file, you see that the first event that is added is the anonymous function which calls all <body onload=""> methods. This is the same as your initPage method. And within that method you add an event to the input1 element for double click.