I am trying to insert an event listener into an HTML tag programatically.
I have a span tag like <span>Value</span>, and I want to take Value and do some stuff with it when I click the span element.
I imagine it would look something like: <span onclick={function where I do stuff with Value}>Value</span>
I have tried to follow along the notebook on hypertext literals but can’t seem to make this work.
So I created a simple notebook with a sample problem. Any help with this would be appreciated, I still am trying to get my head around hypertext literals/inserting HTML etc!
Thanks for your reply, the target.innerHTML part is certainly helpful.
But I think the main problem that I’m struggling with (sorry if it wasn’t evident in the way I phrased the question) is inserting the onclick= part programatically. I want to start off with
<span>Value</span> ← (I get given this as a string)
and end up with
<span onclick={function where I do stuff with Value}>Value</span>
and display that as HTML. Using a regex to add the onclick part does weird things. Hope that is clearer.
I think you might do this much more cleanly by d3.selecting the html literal and programmatically adding the event listener. Here’s an example:
If you open the notebook (by clicking on its name in the iframe footer), you should notice the following:
The text of the html literal is defined by a string in a separate cell,
the function f that converts from decimal to binary is also defined in a separate cell, and
the event is set using d3.select, as mentioned above.
As a side note, a friend of mine met Douglas Adams at a book signing and asked him to write the number 42 in the book he was signing. When my friend got his book back, 42 was written as 101010.
I agree with @mcmcclur; I would avoid trying to do this by manipulating HTML source (strings) and instead do it using the DOM API (possibly using a helper library, such as D3). For example, you could have a function that adds event listeners to a given element:
function withClick(element) {
element.addEventListener("click", () => doStuff());
return element;
}
And then apply your listeners to an element in another cell like so:
withClick(htl.html`<span>click me</span>`)
Another approach would be to wrap the elements (which is used exactly the same way as above):
function withClick(children) {
return htl.html`<span onclick=${() => doStuff()}>${children}</span>`;
}
Using the DOM will be a lot easier than trying to parse and rewrite HTML source yourself (and you can’t generally serialize event listeners anyway).
Thank you @tophtucker@mcmcclur and @mbostock for all the good advice, I managed to use d3 to achieve what I wanted. Can’t believe I struggled for a week to do something so simple! Ah well got there in the end.