/    Sign up×
Community /Pin to ProfileBookmark

Setting an event value to call a function with parameters

Hi all,

I’ve never done this type of coding before, and so far every snippet I’ve found on Google has failed to work.

I have a function that created a new element for which I’m trying to set the onClick and onBlur events. The events should call a function once triggered. Not only do I need to construct the function, but also pass parameters to it from within the parent function.

Here’s my code so far:

[CODE]
function TextOut(txtID,defaultText,isPass)
{
var myBox = document.getElementById(txtID);
//alert(myBox.value);
if (myBox.value == “”)
{
myBox.value = defaultText;
if (isPass == “yes”)
{
var msie = ((navigator.appVersion.indexOf(“MSIE”)!= -1)&&!window.opera)? true : false;
if (msie)
{
//var np=myBox.cloneNode(true);
//np.type=”text”;
//np.value = defaultText
//myBox.parentNode.replaceChild(np,myBox);

var np = document.createElement(“input”)
np.name=txtID;
np.id=txtID;
np.value=defaultText;
[COLOR=”Red”][B]np.setAttribute(“onClick”,”TextOver(‘” + txtID + “‘,'” + defaultText + “‘,'” + isPass + “‘);”)
np.setAttribute(“onBlur”,”TextOut(‘” + txtID + “‘,'” + defaultText + “‘,'” + isPass + “‘);”)[/B][/COLOR]
np.className = “font textbox”;
myBox.parentNode.replaceChild(np,myBox);
myBox = null;
myBox = np;
alert(“Mybox=” + myBox.onClick + ” / np =” + np.onClick);

}
if (!(msie))
{
myBox.type = “text”
}
}
}
}
[/CODE]

Thanks in advance for any ideas/advice.

ZS

PS: The code generates no errors. Simply nothing is triggered when the newly created element is acted upon — which leads me to believe that the function call is not being properly embedded.

to post a comment
JavaScript

7 Comments(s)

Copy linkTweet thisAlerts:
@Declan1991Nov 19.2008 — Never use setAttribute for event handlers. It's supposed to work, but it doesn't in IE. The easiest thing for you to use isnp.onclick = [B][COLOR="Red"]function(){[/COLOR][/B]
TextOver(txtID,defaultText,isPass);[B][COLOR="Red"]};[/COLOR][/B]
Copy linkTweet thisAlerts:
@MrNobodyNov 19.2008 — You should not be using setAttribute for events.
Copy linkTweet thisAlerts:
@ShikarnovauthorNov 19.2008 — I had tried that method above (one of the snippets found on Google), but I just now copied and pasted your code directly and I'm getting the same lack of results. Hell, even an error would be better.

[CODE]
np.onClick = function(){
TextOver(txtID,defaultText,isPass);};
np.onBlur = function(){
TextOut(txtID,defaultText,isPass);};
[/CODE]


<sigh>

PS: Amazing how easy this was for Firefox et al.. "np.type='text'" and onto the next thing.
Copy linkTweet thisAlerts:
@MrNobodyNov 20.2008 — This:
[CODE]var np = document.createElement("input")
np.name=txtID;
np.id=txtID;
np.value=defaultText;
np.setAttribute("onClick","TextOver('" + txtID + "','" + defaultText + "','" + isPass + "');")
np.setAttribute("onBlur","TextOut('" + txtID + "','" + defaultText + "','" + isPass + "');")
np.className = "font textbox";
myBox.parentNode.replaceChild(np,myBox);
myBox = null;
myBox = np;[/CODE]

should be this:
[CODE]var np = document.createElement("input")
np.name=txtID;
np.id=txtID;
np.value=defaultText;
np.className = "font textbox";
myBox.parentNode.replaceChild(np,myBox);
myBox = document.getElementById(txtID);
myBox.onclick = function () { TextOver(txtID, defaultText, isPass); }
myBox.onblur = function() { TextOut(txtID, defaultText, isPass); }[/CODE]

And I've used this cross-browser many times -- so don't say it doesn't work. If it don't work, it is not the fault of either IE or FF.
Copy linkTweet thisAlerts:
@MrNobodyNov 20.2008 — By the way... Don't miss the above, but the reason [B]setAttribute[/B] doesn't work for events is because you're trying to add JavaScript code without the knowledge of the browser. Thus, the JavaScript code doesn't get compiled as JavaScript and can't be executed as JavaScript. Even in other browsers, you're supposed to add an event listener -- not use [B]setAttribute[/B].
Copy linkTweet thisAlerts:
@ShikarnovauthorNov 20.2008 — 
And I've used this cross-browser many times -- so don't say it doesn't work. If it don't work, it is not the fault of either IE or FF.[/QUOTE]


Please don't think I don't appreciate your help. I do. I'm not claiming to be a JavaScript expert here, nor am I trying to lay blame at anybody's feet. I'm just trying to get a simple effect operational.

I never wanted to create multiple objects, swap them around, and etc. I simply wanted to change the type of box from text to password and back. I had that working in Firefox in a few seconds and with 1 line of code. Whereas IE has taken hours and generated this thread.

Anyway, the code you provided works perfectly -- and I thank you very much for the help you provided in this, and in the other thread.

ZS
Copy linkTweet thisAlerts:
@MrNobodyNov 20.2008 — Whereas IE has taken hours and generated this thread.[/QUOTE]
Just don't blame the [any] browser or manufacturer of that browser. Get used to the fact that browsers are different and it is up to the programmer to learn to work with the browser -- not belly-ache every time something takes a little more effort to do it "right."

I remember when people griped, complained, and laid blame on the "other" browsers for not supporting IE's [B]innerHTML[/B] and having to go the "long way" of using [B]createElement[/B] -- whereas, in IE, it was just "1 line of code." Now the other browsers are coming along in that area.

So I'm just a little testy when I hear people blaming the "browser" -- any browser!
×

Success!

Help @Shikarnov spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...