I am attempting to pass an event from button onclick to a function in my js file. I am testing using live preview in Brackets.
On the HTML File I have a button like the following;
<button class="btn btn-link" type="button" onclick="return submit_ul_form(event);">
Upload
</button>
In my JS File I have the following;
function submit_ul_form(e)
{
alert(JSON.stringify(e)); // Gives: {"isTrusted"true}
var target = e.target;
alert (JSON.stringify(target)); // Gives: undefined
....
}
I am unsure why this occurs - It's my understanding that I should be able to retrieve the node from event.target
I have also tried onclick="submit_ul_form(this)"
This gives {} for the first alert, and undefined for the second.
What could cause this behaviour?
As said in my comment (done some try since I commented so now I'm sure of it)
JSON.stringify has some rule and the one applied here is this one : All the other Object instances (including Map, Set, WeakMap, and WeakSet) will have only their enumerable properties serialized.
look at the doc for more details
And finally a little script listing all enumerable properties for the event
and the target
function submit_ul_form(e)
{
console.log("enumerable in event : ")
let a = 0
for(let i in e) {
if(e.propertyIsEnumerable(i)) {
console.log(`${i} = ${e[i]}`)
a++;
}
}
console.log("Total: " + a)
console.log("JSON.stringify(e) = " + JSON.stringify(e))
console.log(" ")
var target = e.target;
console.log("enumerable in target : ")
a = 0
for(let i in target) {
if(target.propertyIsEnumerable(i)) {
console.log(`${i} = ${target[i]}`)
a++;
}
}
console.log("Total: " + a)
console.log("JSON.stringify(target) = " + JSON.stringify(target))
}
<button onclick="return submit_ul_form(event);">
Upload
</button>