When I try to select an element by its ID, I encounter the issue of it being undefined.
To demonstrate this problem, I have created an example (fiddle link)
The setup of elements is as follows:
<pre id='output'></pre>
<input id='my-checkbox' type='checkbox'>
The d3 script in question is:
d3.select('#my-checkbox')
.call(function(){
document.getElementById('output').outerHTML = this.id;
})
.on('click', function(){
document.getElementById('output').outerHTML = this.id;
});
Despite the attempt, the pre element still displays "undefined" even after clicking on the checkbox. However, a different script behaves differently:
d3.select('#my-checkbox')
.on('click', function(){
document.getElementById('output').outerHTML = this.id;
});
I am puzzled by this behavior. How can I access the element's ID within d3's call function?