We Keep Coding

Javascript : How to make a element clickable that was created in a function

Hey I have a problem that I don't know how to solved.
To make simple. I have a script that create element based on what I have get from a server.
At moment I create an image with the id "add"
And I want when we click on this image to trigger a function so I did a little script
document.getElementById('add').onclick = function(){
alert('ADD !'); // <- For the test
}
But I get a problem when Uncaught TypeError: document.getElementById(...) is null. I thing this because I create this element in the other function and he is not directly in the html code. But I don't know how to solve that.

You have to append the element to the document:
document.appendChild(yourElement);
Then you have to add an EventListener to your object:
document.getElementById('add').addEventListener("click",
function() {
alert('test');
});

i think your example is not long enought to answer you properly but to do want you want, you need to create your element, then attach your event to the element. I'm pretty sure you are trying to set the event on a element that doesn't already exist in DOM

'onkeydown' attribute visible but null?

I'm writing a Chrome extension and I'm trying to programmatically trigger a keypress event on the textarea element where you type in Facebook chat.
If I look at the element in the inspector, I can see that it has an onkeydown handler set:
onkeydown="run_with(this, ["legacy:control-textarea"], function() {TextAreaControl.getInstance(this)});"
--but I can't trigger it. While trying to figure out why I can't trigger it, I found that when I select the element using one of the classes on it and type document.querySelector('._552m').onkeydown in the console, it comes up null. Likewise, using getAttribute on it for onkeydown comes up null.
What am I missing here? How can I get at this event handler? Why can I see it set on the element in the inspector and yet not access it programmatically in the usual way? Is React pulling some weird magic here?
Edit: document.querySelector('._552m').attributes shows the onkeydown attribute listed....wtf...

If document.querySelector('._552m').attributes displays the onkeydown attribute, you should be able to access the event handler using document.querySelector('._552m').getAttribute('onkeydown') (it works for me, returns this on my facebook page):
"run_with(this, ["legacy:control-textarea"], function() {TextAreaControl.getInstance(this)});"
Otherwise, since the attributes object is just a NamedNodeMap you can just access it using getNamedItem('onkeydown') on document.querySelector('._552m').attributes like this:
var elm = document.querySelector('._552m')
elm.attributes.getNamedItem('onkeydown') //returns the attr itself
elm.attributes.getNamedItem('onkeydown').value //returns the string value

What is a simple way to make "null" not to render?

I have created a simple polymer element with no js that has attributes in it. When the attribute is not called it shows "null".
http://jsbin.com/wakal/1/
How do I tell the element not to show null?. If the attribute is left blank I do not want anything to show up?

Normally to use default values you need to use the script and initialize the properties there.
See http://www.polymer-project.org/docs/polymer/polymer.html#default-property-values
Alternatives are to use
{{propname?propname:'default value'}} or
{{propname||'default'}}

Using JQuery to get string value of an onclick() event

Wondered if there was good way to do this, thought I would post to the SO community...
There is a 3rd party web page that I have no control over how it renders, but they allow me to add JQuery.
Using the JQuery, I am creating a nav menu on the side of the page, it will be a list of links. The onclick event of these links I get from existing onclick events already on the page, but when I do a:
var linkLoc = $('#theLink').attr("onclick");
linkLoc returns:
function onclick(event) {
handleJumpTo("com.webridge.entity.Entity[OID[E471CB74A9857542804C7AC56B1F41FB]]", "smartform");
}
instead of what I would expect:
handleJumpTo("com.webridge.entity.Entity[OID[E471CB74A9857542804C7AC56B1F41FB]]", smartform");
I think JQuery is trying to get the event for binding, but I need the actual Javascript markup since I'm creating the HTML dynamically. I guess I could substring the "function onclick(event) {" out, but seems kind of hacky.
Any ideas of an elegant way I could get the onclick markup?

$("#theLink") would return a jQuery object whereas $("#theLink")[0] would give a DOM object. This is a resson that $("#thelink")[0].getAttributeNode('onclick').value would work.

The type of $('#theLink').attr("onclick") is a function, so you can just use that when you bind events to the links.
var linkLoc = $('#theLink').attr("onclick");
$('a#link1').live('click', linkLoc);
Example: http://jsfiddle.net/BdU6f/
You can also run other code in the click handler too, if you need:
var linkLoc = $('#theLink').attr("onclick");
$('a#link1').live('click', function(e){
// Code...
linkLoc(e);
});
Example: http://jsfiddle.net/BdU6f/1/

The "onfoo" attributes have values that are functions, not strings. The semantics of:
<whatever onclick='code code code'>
are that the browser constructs a function object as if you had code that did this:
document.getElementById('whatever').onclick = new Function("event", "code code code");
Thus you don't really need the raw string, since you've got something better: the function itself, ready to be called. You can then bind it as a handler to other elements via JavaScript code, not HTML (which is really a better way to do things anyway). You're using jQuery, you say, so you can use the jQuery ".bind()" API to bind those functions to whatever elements you need.
You should also be aware that there are other ways of binding event handlers to elements, ways that will leave the "onfoo" attributes completely unset.

If I understand where you're going with this, you should be able to assign the returned onclick function straight through to the onclick of your new nav element...
$('#NewNavElement').click($('#theLink').attr('onclick'));
If you need to add additional code to the handler, you can just bind another click handler.

try this;
$('#theLink').getAttributeNode('onclick').value
Revised as per comment:
$('#theLink').get().getAttributeNode('onclick').value

Call Javascript function when a div turns from visibility : hidden

I want to call a Javascript function when a div is turned from "visibilty : hidden" to "visibility : none;"
Also note that I don't have control over the script which turns this style property of the div. I just want to hook into this. Any possibilities? Or like onFocus() etc?
UPDATE : I do not want to use JQuery or other frameworks. Is it possible?

In mootools you can create custom events. However, I would do something like this:
document.getElementById('foo').triggerMyEvent = function() {
if (this.style.visibility == 'hidden') {
// do something
} else {
// do something else
}
}
And add a call to the object's 'triggerMyEvent' method in whatever code switches the object's visibility.

There's the propertychange event in IE that responds to changes in an element's properties, including properties of its style object. However, this only works on properties set directly on the element's style object and doesn't work for CSS changes (e.g. changing the class of the element's parent element) that indirectly affect the element's style. Using the DOMAttrModified in other browsers will work similarly and has the same shortcomings, so this may not be workable for you.