i have this Javascript function
function webit(thumb){
webi = document.createElement("img");
webi.alt=thumb.id.replace("t", "");
webi.id = "w"+webi.alt;
webi.className = "web";
webi.src= thumb.src.replace("thm","web");
webi.height=233;
webi.onclick='alert()';
document.body.appendChild(webi);
}
which is supposed to embed a larger version of a thumbnail image the end of the document. It works fine except that any javascript function ( ie onXXX) stays resolutely null. This seems to be no matter which JS function i use and afaict any thing i try to set it to.
The above example uses
webi.onclick='alert()';
which fails leaving onclick null, though all the other statements succeed.
When in javascript the .onclick property expects a function not a string
webi.onclick=function(){ alert(); };
You could also use the addEventListener method to set an event handler
webi.addEventListener("click",function(){ alert(); });
There are two problems, you are giving quotes to alert & onclick requires a function that can be called after clicking on it, you should not call the assigned function.
webi.onclick=function(){alert()};
You might consider declaring webi as var. Without "var", you implicitly defined window.webi, and it will introduce memory leaks.
var webi = document.createElement("img");
In addition, jQuery is usually a better choice than raw js/browser API.
Related
When dynamically creating an element of type select, there are two problems when setting the onclick method:
It is impossible to simply set the onclick with element.onclick="updateInput(this.articleIndex)";
This results in a final HTML tag where no onclick is shown at all.
When set by e.setAttribute("onclick","updateInput(this.articleIndex)");, it does appear in the final HTML. And the updateInput method does get called.
However the functionality seems to be broken, as the argument always evaluates to undefined
Here a simple example of my problems:
var selectElem = document.createElement("select");
selElem.id="articleSelector_"+this.articleIndex;
console.log("the index of the article is " + this.articleIndex);
selElem.setAttribute("onclick","updateInput(this.articleIndex);");
//selElem.onclick="updateInput(this.articleIndex)"; //this does not work
The log shows the correct number. Inside the updateInput method, the argument is of value undefined instead of the number previously shown in the log.
Try attaching handlers with pure Javascript, and not with HTML, without onclick = "... (which is as bad as eval).
The this in your script refers to the calling context of the function - what is it?
You might want:
element.addEventListener('click', () => {
updateInput(this.articleIndex);
});
(arrow functions retain the this of their surrounding scope)
it is impossible to simply set the onclick with element.onclick="updateInput(this.articleIndex)";
What that code does is it assigns the string "updateInput(this.articleIndex)" to the onclick which makes no sense and certainly not what you want.
Even if you remove the quotes:
element.onclick = updateInput(this.articleIndex);
It is still incorrect because it assigns the result of the updateInput() function to the onclick which is again not what you want.
You need to assign a function name to the onclick like this:
element.onclick = updateInput;
However, this doesn't allow you to pass a parameter as you wish. To do so, you need to use an anonymous function:
element.onclick = function() {
updateInput(this.articleIndex)
};
When set by e.setAttribute("onclick","updateInput(this.articleIndex)");, it does appear in the final HTML. And the updateInput method does get called.
This works because it sets the attribute onclick and it is a string type, so everything is correct. It is equivalent to using the anonymous function above. The only difference is this, which in this case refers to the element itself, while in the above code it depends on the context that the code appears in. That's why in this case the argument always evaluates to undefined because the select element doesn't have an articleIndex property.
The problem is the value of the context this when that element is clicked, the context this is not available anymore at that moment.
You have two ways to solve this problem:
You can use the function addEventListener to bind the event click, and bind the function/handler with the desired context this:
The function bind binds a specific context to a function.
selElem.addEventListener('click', updateInput.bind(this));
function updateInput() {
console.log(this.articleIndex);
}
As you need a specific value, you can use data attributes. That way, you don't need to worry about the context this.
selElem.dataset.articleIndex = this.articleIndex;
selElem.addEventListener('click', function() {
updateInput(this.dataset.articleIndex); // Here you can get that value.
});
I have a string I am using to get a pointer to my function. Then I want to use this function to set an onclick while passing arguments to the function.
var functionPtr = window[stringFunction];
pTag.onclick = function () {
functionPtr(args);
};
When I do this, the onclick event tries to call "functionPtr(args)" instead of calling the function I'm pointing to. Using break points, I can see that functionPtr is definitely a reference to the function I want when I assign the onclick function. What steps am I missing here?
Thanks in advance!
I couldn't get my above attempt to work so I decided to set the onclick event using the setattribute() function instead.
var stringFunction = 'myFunction(args)';
pTag.setAttribute('onclick', stringFunction);
This seems to do the trick. Its important to note this doesn't work for earlier versions of IE, but I'm only required to work with IE 10 and up so this works for me.
I have a global variable var num_tab=1;, a function that creates a link a href :
function Addsomething()
{
$("#tout").html("<a style=\""+"margin-left:-20px;"+"\" onClick=\"eval(num_tab=2)\" href=\""+"#tab1"+"\" data-toggle=\""+"tab"+"\">SELECT</a>");
Bla,Bla..
$("#champ1").append('<li id=\"1\" class="champ" onclick="insertAtCaret("sousTab'+num_tab+'");" value=\"1\">1</li>');
}
What i want to do is to create a href that when clicked changes the value of the variable num_tab, but if you can see the href is inside a jquery html(), which makes me confused about how to assign a value to the variable. I almost tried everything: onClick=\"num_tab=2\",onClick=\""+num_tab+"=2\"
Actually i tried something: when i write onclick='num_tab=2;alert("+num_tab+");' i still get the initial value of num_tab, seems it's more like a problem of local and global variable and i can't figure out it yet.
Please don't use eval(). It's insecure and not the appropriate tool for this job. Just assign a function to the onclick:
$("#tout").html("<a onclick='set_num_tab(2)'">); //fill out the rest of this line
function set_num_tab(value) {
num_tab = value;
}
That should give you an idea of how to do it. btw there's no reason you can't use single quotes around an onclick like that.
Alternately, this would work:
$("#tout").html("<a onclick='num_tab=2'">);
But that's pretty messy. I try to avoid inline JavaScript.
I have written this code (this is a snippet) that doesn't seem to be working. I have isolated it to here.
grab = window.document.getElementById;
grab("blueBox") // i.e. grab("blueBox").onclick [...]
Is it possible to create references to native function in javascript. I am doing something with the grabbed element, I just left it out for example. The grab function doesn't seem to work.
I am using FireFox's most recent version
The way you're doing it will mess up the assignment of the this value for the function.
grab = window.document.getElementById;
grab("blueBox") // i.e. grab("blueBox").onclick [...]
here this will be the global object. Try:
grab.apply(window.document, ["blueBox"])
or in newer browsers:
grab = window.document.getElementById.bind(window.document);
to get directly define what this will be.
The first step here is always the JavaScript console. Firebug is your friend. Tell us the error message if it doesn't mean anything to you.
In the mean time, here is a workaround:
var grab = function(id) { return window.document.getElementById(id); }
function grab(id) {
return window.document.getElementById(id);
}
grab("blueBox");
The reason is because the function getElementById is not being called as a method of document, so its this keyword doesn't reference the right object. Using call as suggested in other answers shows that when this references the document, getElementById works.
I want to disable a whole bunch of objects on the page, and then re-enable them later. Since some of them are tags rather than buttons, I disable them by removing their onclick attr. I've tried to store the old handler in a .data(), but unfortunately when I attempt to restore them with $(obj).attr('onclick',$(obj).data('onclick')), it calls the function rather than restoring it to the attribute. And if I try to store it in a different attribute instead of a data, it doesn't store the function, it stores the return value for the function.
Is there any way to accomplish this without re-writing every tag and every onclick handler on my page?
if( doEnable) {
$(obj).attr('href', $(obj).data('href'));
$(obj).attr('onclick', $(obj).data('onclick'));
$(obj).removeClass(EIS.config.classes.disabled);
$(obj).show();
}
else {
// Save the things you're going to remove
$(obj).data('onclick', $(obj).attr('onclick'));
$(obj).data('href', $(obj).attr('href'));
$(obj).prop("href", null);
$(obj).prop("onclick", null);
$(obj).addClass(EIS.config.classes.disabled);
$(obj).show();
}
By the way, this code seems to work fine in Chrome and Firefox, but only sometimes in IE8 and never in IE6. Unfortunately the client tests first in IE6.
$(obj).attr('onclick', ...
is ambiguous, has results that differ in different versions of jQuery and different browsers. It probably doesn't do what you want. You should avoid using attr on event handlers.
The problem is the disconnect between the onclick attribute and the onclick property. jQuery has tried to brush the difference between an attribute and a property under the carpet in the past, using attr to access both, but they're quite different. This was changed in jQuery 1.6, and partially reverted in 1.6.1, to widespread controversy, confusion and incompatibility.
For many properties, the values of an attribute and the corresponding DOM property are the same; for others, including all properties that aren't strings, they aren't. Event handlers certainly aren't: the property is a Function object, whereas the string attribute might be (a) the original string of the onclick="..." attribute in the HTML, (b) nothing (if the onclick was assigned from script to be a Function object) or (c) unavailable (in older IE).
To access the event handler Function property, use prop() in jQuery 1.6:
$(obj).data('onclick', $(obj).prop('onclick'));
...
$(obj).prop('onclick', $(obj).data('onclick'));
or just use plain old JavaScript which is actually simpler and more readable; jQuery wins you nothing here.
obj._onclick= obj.onclick;
...
obj.onclick= obj._onclick;
Either way this is not going to reliably ‘disable’ elements since they can (and very likely will, if you're using jQuery) have other event listeners registered on them, using addEventListener/attachEvent rather than the old-school event handler interfaces.
It looks like saving a function via .data() works just fine:
var f1 = function() { console.log('invoked'); };
$('a').data('func', f1)
var f2 = $('a').data('func'); // 'invoked' is not printed
f1 === f2 // true
so how are you storing the function via .data? if you're doing something like
a = $('a');
a.data('onclick', a.click()); // click handler is invoked here
then you're actually invoking the click handler(s) prematurely, and storing the return value with .data().
--edit--
it appears that .attr(function) invokes the passed function. This is a feature of jQuery. I'd suggest using jQuery's .click() method to attach the function as a click handler.
a = $('a');
a.each(function() {
this.data('onclick', handler_fn);
this.bind('click', handler_fn);
});
// later
a.each(function() {
this.unbind('click');
});
// even later
a.each(function() {
this.bind('click', this.data('onclick'));
});
What about binding the event in jQuery instead of setting the onclick attribute?
$(obj).click($(obj).data('onclick'));
Can we see the code that you use to set the data attribute?