CODEWITHSUNDEEP
javascriptjupyter-notebook
RobertH
RobertH

Reputation: 137

detect a button click without getElementById

In jupyter, there is a button pointed out by red arrow

enter image description here

Which could be used to summon up a inner command palette

enter image description here

Which is actually an input and a list of <li>

The key function of the button is data-jupyter-action="jupyter-notebook:show-command-palette"

<button class="btn btn-default" title="open the command palette" data-jupyter-action="jupyter-notebook:show-command-palette"><i class="fa-keyboard-o fa"></i></button>

I guess I need a javascript snippet to handle data-jupyter-action attribute.

Usually, script can identify the element by getElementById but this button doesn't have an Id.

How can I detect the button clicking and respond "jupyter-notebook:show-command-palette" action?

Upvotes: 0

Views: 96

Answers (1)

Antoine Bernier
Antoine Bernier

Reputation: 94

You can use querySelector instead of getElementById.

querySelector select elements with css selector.

let elem = document.querySelector('[data-jupyter-action="jupyter-notebook:show-command-palette"]');

This will return the element if it exists. It returns undefined if not found.

Upvotes: 2

Related Questions