Javascript Events on inline HTML rlements

Hi there people :smiley:

From the past few days I’ve tried to add javascript events to HTML Buttons in my notes. (hover, click, etc)
I’ve tried inlining (<button onclick=“Go to last meetinggg” >Last meeting)
attaching events through the console or dataviewjs blocks… but no luck.

I know there’s a plugin for buttons but being able to just call a JS function and manage my button as an HTML elem is way more versatile for my use case. Plus I don’t have to depend/learn one thing more.

From the Obsidian API ref I havent found anything, but maybe I’m missing something. Is there a way to register event’s to specific elements ?

Please send help XD

2 Likes

I am having the exact same problem

Yep as soon as you go into view mode the onClick handler vanishes. I’d love to know if there is a plugin or way to enable the handlers!

I’m testing out porting my Anki setup into Obsidian and a SRS plugin. But I would need the HTML demos to work properly…

This thread exists but unfortunately there is nothing that can help. The security precautions make sense, but it’s not so helpful when you’re writing you’re own notes…

This plugin exists and allows HTML files to achieve what we want. The only issue is that you can’t swap between edit and view mode to edit the file in Obsidian…

A future direction is to look at the code and work out how the ‘unsafe’ method happens and use it within the Markdown notes? Doesn’t seem possible as its opening a new page.

Perhaps this plugin can be used to provide JS across notes ready to be used in dataview or something?

The most ideal solution here is that users have control over which things Obsidian filters out of the HTML through the settings. This would be amazing for my use case but sadly seems like it’s not going to happen :sob:

Meta-bind plugin may help.

Here’s an example from Inline JS - Meta Bind Docs.

style: primary
label: Greet the World
action:
  type: inlineJS
  code: "console.log('Hello World!');"