PDA

View Full Version : onclick problem



janunme
04-09-2007, 06:13 AM
hi to all

i want to change the properties of some objects. is it possible
i am sending my code please go through this and tell is it possible




<html>
<head>
<script language="javascript">
function put()
{
//here it redirects to insert page
}
function putupdate()
{
/*here i want to write code to find the record of entered number and put those values at relevent fields, i want to hide "Insert" button and also change the method which is going to call "Update" button to update()*/
}
function updateing()
{
//here it redirects to update page }
</script>
</head>
<body>
<form name="f1">
<br><br>
<center>
Number:<input tpe="text" name=t1"><br>
Name:<input type="text" name="t2"><br>
Address:<input type="textarea" rows=4 cols=4 name="ta1"><br><br>
<input type=button value="Insert" onClick="put()">
<input type="button" value="Update" onClick="putupdate()">
</body>
</html>



regards

tech_support
04-09-2007, 06:15 AM
Use this:


document.forms['formname'].elements['buttonname'].onClick = null

to clear the onClick event on a button.

janunme
04-09-2007, 06:38 AM
thanks for your quik reply

the code what you sent is to set onclick to null. if i want to set new method for onclick can i use as follows:

document.forms['formname'].elements['buttonname'].onClick = 'newFunction()'

is it correct.

tech_support
04-09-2007, 06:40 AM
Nope. You need to set it as:


document.forms['formname'].elements['buttonname'].onClick = function() {newFunction()}

janunme
04-09-2007, 10:08 AM
i used like this. bu ti amgetting errors only. where i am doing mistakes


<html>
<head>
<script language="javascript">
function tes()
{
window.alret("hi");
document.forms['f1'].elements['b1'].onClick = function() {tep()}
}
function tep()
{
window.alert("hello");
document.forms['f1'].elements['b1'].onClick = function() {tes()}
}
</script>
</head>
<body>
<form name="f1">
<input type=button onclick="tes()" name="b1" value="click here">
</form>
</body>
</html>



i am getting th e following error "object does't support this method or property"
regards

tech_support
04-09-2007, 10:16 AM
Why do you need to repeat the function?

codeexploiter
04-09-2007, 10:27 AM
The problem in red color


<html>
<head>
<script language="javascript">
function tes()
{
window.alret("hi");
document.forms['f1'].elements['b1'].onClick = function() {tep()}
}
function tep()
{
window.alert("hello");
document.forms['f1'].elements['b1'].onClick = function() {tes()}
}
</script>
</head>
<body>
<form name="f1">
<input type=button onclick="tes()" name="b1" value="click here">
</form>
</body>
</html>

It should be


window.alert("hi");

I wonder what you are trying to do :confused:

mburt
04-09-2007, 12:32 PM
Plus that creates an indefinite loop, which could possibly crash a client's computer :).

I wonder what you are trying to do
I don't see any point either.

jscheuer1
04-09-2007, 03:34 PM
In javascript, it is:

onclick

Not:

onClick.

You can do this:


function bob(){
alert('bob');
}
element.onclick=bob;

or this:


function bob(){
alert('bob');
}
element.onclick=function(){bob();};

or:


element.onclick=function(){alert('bob');};

or even:


element.onclick=new Function("alert('bob')");

jscheuer1
04-09-2007, 03:50 PM
I looked into this a bit further and there were a few other typos/syntax errors. This works:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
function tes(el)
{
alert("hi");
el.onclick = function(){tep(this)};
}
function tep(el)
{
alert("hello");
el.onclick = function(){tes(this)};
}
</script>
</head>
<body>
<form name="f1">
<input type=button onclick="tes(this)" name="b1" value="click here">
</form>
</body>
</html>

mburt
04-09-2007, 06:23 PM
You can do this:

Code:

function bob(){
alert('bob');
}
element.onclick=bob;

or this:

Code:

function bob(){
alert('bob');
}
element.onclick=function(){bob();};

or:

Code:

element.onclick=function(){alert('bob');};

or even:

Code:

element.onclick=new Function("alert('bob')");

You're forgetting the complicated pointless way of doing things:

var call=(function() {alert("foo")})
element.onclick=function() {call()};

jscheuer1
04-09-2007, 09:54 PM
You're forgetting the complicated pointless way of doing things:

var call=(function() {alert("foo")})
element.onclick=function() {call()};

Well, here is an even simpler method and the HTML is even valid strict:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function test(){
alert(test.msg=test.msg=='hello'? 'hi' : 'hello');
}
test.msg='hello';
</script>
</head>
<body>
<div>
<input type="button" onclick="test();" value="click here">
</div>
</body>
</html>

janunme
04-11-2007, 07:12 AM
why i am calling function repetatively is, i want to check whether the onlick's fucntion is changing or not. if changed then every time my button will execute aleternate function

regards





Why do you need to repeat the function?

jscheuer1
04-11-2007, 07:41 AM
Due to the problem of memory leaks in IE, you are better off assigning one onclick function and having it perform two different operations depending upon a property of the function which is toggled each time the function executes:


function tog(){
tog.tog=!tog.tog;
alert(tog.tog? 'hi' : 'hello')
}

Or, for more complex code alternatives:


function tog(){
tog.tog=!tog.tog;
if(tog.tog){
code for first alternative execution
use as many lines as you need
}
else{
code for second alternative execution
use as many lines as you need
}
}

In the case of toggling - say, a rollover - you might be better of testing for the image's source. In any case, repeatedly assigning functions to events can eat up memory and is best avoided whenever possible.

janunme
04-11-2007, 05:22 PM
sorry i did't understand any thing from the above code

mburt
04-11-2007, 05:31 PM
Basically, when the first "if" statement's condition returns true, do what you want to do first. If not, that's what "else" is for.

janunme
04-11-2007, 06:09 PM
ok i got it but it is too complicated. my idea is, i will write what ever functions i want and when ever a key is pressed it goes to the relevent function which is assigned to onclick event. now i am aking you that here i want to assign new function to onclick event of same buttons is it possible.

jscheuer1
04-11-2007, 06:15 PM
Basically, when the first "if" statement's condition returns true, do what you want to do first. If not, that's what "else" is for.

That's right. More details:

By declaring:


function tog(){
whatever
}

we are establishing a function object named tog. We can then test and/or assign properties to that object, in this case with:


tog.tog=!tog.tog

we are (first time through) assigning it a property named tog. And, since that property didn't exist, it was false (falsey or undefined, to be more exact) and since we are assigning it the value of ! (not) tog.tog, it will become true the first time through. The second time through, since it exists and is true and we are assigning it the value of ! (not) tog.tog, it will now toggle to false, and so on each time the function is run - true/false/true/false etc.

Once we have set up this alternation, we can use it to execute different code branches each time the function is run by simply testing the truth or falseness of tog.tog.

In the first example:


function tog(){
tog.tog=!tog.tog;
alert(tog.tog? 'hi' : 'hello')
}

we do this by choosing the alert's text based upon the truth or falseness of tog.tog. In the second example, we are doing basically the same thing but have structured the function to allow for more code to be assigned to each branch.

janunme
04-11-2007, 07:00 PM
yes now i understood where my code is miss leading you. the code what i send you is to only test whether we can change the function which we assigned to a button or a hyperlink etc. that is my mistake. i think you are thinking in that way and responding you very correctly to that situation. really i am sorry if you accepted my sorry please mention it in your reply.

i am explaining everything to you


in our project we are developing an user interface to "insert" , "update" and "delete" of Country's details, State's details, District details ......

for this first we planned to develop different forms for "Country", "State", ...., later we identified that we are duplicting the same code with some minor changes like properties(like size, title) and functions that are going while events are going to fire like onclick etc.

at tha time i got this idea about changing the properties of these fields/objects dynamically. now my requirement is how to change those properties.

regards

once again i am sorry i am feeling very badly

jscheuer1
04-11-2007, 09:20 PM
Well, you could use a similar type of mechanism, without changing onclick but, since this is javascript, any changes made by the user will be lost unless stored in a data base. That part would need to be done server side.

You could get values from form data:


function aloc(){
alert('Counry:'+document.forms['loc']['coutry'].value+'\nState:'+document.forms['loc']['state'].value);
}

But, for those values to persist in any meaningful way across sessions, they would need to be stored, as I say, server side.

Once again, whatever you want/need to do can probably be done from one function, rather than by switching functions which, can often cause other problems.

janunme
04-12-2007, 09:16 AM
why you are using alert(), i am not able to understand what is the use here that is confusing me. there is no need to inform about this to user

here i am once again keeping my prototype code:



<html>
<head>
<script language="javascript">
function f1()
{
document.write("This is function f1()");
}
function f2()
{
documnet.write("This is function f2()");
}
</script>
</head>

<body>
<h4>click here</h4>
<input type="button" name="b1" value="PUSH" onclick="f1()">
<br><input type="button" name="b2" value="CHANGE" onclick="change()">
</body>
</html>


after loading my webpage when ever i press PUSH button it writes "This is function f1()". once i press button "CHANGE" then after when ever i press button "PUSH" it must and should write on webpage is "This is functionf2()". this is my requirement.


regards

jscheuer1
04-12-2007, 10:49 AM
You started with the alerts here (even though you misspelled the first one):


i used like this. bu ti amgetting errors only. where i am doing mistakes


<html>
<head>
<script language="javascript">
function tes()
{
window.alret("hi");
document.forms['f1'].elements['b1'].onClick = function() {tep()}
}
function tep()
{
window.alert("hello");
document.forms['f1'].elements['b1'].onClick = function() {tes()}
}
</script>
</head>
<body>
<form name="f1">
<input type=button onclick="tes()" name="b1" value="click here">
</form>
</body>
</html>



i am getting th e following error "object does't support this method or property"
regards

If you document.write after the page has loaded, it will obliterate the page. You probably want to change the value of a text input or the innerHTML property of a div or span. However, it is unclear what you really are trying to do. From what you have though, give this demo a shot (copy it to Notepad or another text only editor, save as change_func_h.htm, and view it in the browser):


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function f1(){
document.getElementById('output').innerHTML="This is function f1()";
}
function f2(){
document.getElementById('output').innerHTML="This is function f2()";
}
function execute(){
if(execute.tog)
f1();
else
f2();
}
execute.tog=!execute.tog;
</script>
</head>
<body>
<h4>click here</h4>
<div>
<input type="button" name="b1" value="PUSH" onclick="execute()">
<br><input type="button" name="b2" value="CHANGE" onclick="execute.tog=!execute.tog;">
</div>
<div id="output"></div>
</body>
</html>