# Call javascript from a button click event

**URL:** <https://discourse.jupyter.org/t/call-javascript-from-a-button-click-event/10675>\
**Category:** JupyterLab\
**Tags:** how-to\
**Created:** [September 7, 2021, 8:46pm UTC](https://discourse.jupyter.org/t/call-javascript-from-a-button-click-event/10675 "2021-09-07T20:46:43Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Deming\_Wang](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/deming_wang/32/5155_2.png) [@Deming\_Wang](https://discourse.jupyter.org/u/Deming_Wang)\
**Post date:** [September 7, 2021, 8:46pm UTC](https://discourse.jupyter.org/t/call-javascript-from-a-button-click-event/10675/1 "2021-09-07T20:46:43Z")

</div>

I tried to execute a javascript in Jupyter lab,

The following code works in a jupyterlab cell, and I can see the output from my chrome console,  
from IPython.display import Javascript  
my\_js = “”"  
console.log(‘hello world!’);  
“”"  
Javascript(my\_js)

but when I move it into a button click event function, nothing shows up in chrome console,  
button = widgets.Button(  
description=‘Button’,  
disabled=False,  
button\_style=’’,  
tooltip=‘Button’,  
icon=‘check’  
)

def on\_button\_clicked(b):  
my\_js = “”"  
console.log(‘Hello world2!’);  
“”"  
Javascript(my\_js)

button.on\_click(on\_button\_clicked)

display(button)

Can any expert tell me why and any solution for this ?

Thanks.

---

<div class="post-metadata">

**Author:** ![agoose77](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/agoose77/32/3455_2.png) [@agoose77](https://discourse.jupyter.org/u/agoose77)\
**Post date:** [September 8, 2021, 4:01pm UTC](https://discourse.jupyter.org/t/call-javascript-from-a-button-click-event/10675/2 "2021-09-08T16:01:12Z")

</div>

The reason that the `Javascript` object runs the JS when you run in a cell is because the kernel displays the result of any unterminated (`;`) expression in the cell. So, just calling Javascript isn’t enough to execute it; it is the fact that it is the last expression in the cell that means it is executed. If you want to run this sort of code inside a cell, you can call `display()` and pass in the Javascript object.

---

<div class="post-metadata">

**Author:** ![Deming\_Wang](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/deming_wang/32/5155_2.png) [@Deming\_Wang](https://discourse.jupyter.org/u/Deming_Wang)\
**Post date:** [September 8, 2021, 4:15pm UTC](https://discourse.jupyter.org/t/call-javascript-from-a-button-click-event/10675/3 "2021-09-08T16:15:29Z")

</div>

I have already tried that. Unfortunately, adding “display” won’t solve this issue. It will show up in jupyter log view as "  
\<IPython.core.display.Javascript object\>" instead of executing that javascript in browser.

---

<div class="post-metadata">

**Author:** ![agoose77](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/agoose77/32/3455_2.png) [@agoose77](https://discourse.jupyter.org/u/agoose77)\
**Post date:** [September 8, 2021, 7:38pm UTC](https://discourse.jupyter.org/t/call-javascript-from-a-button-click-event/10675/4 "2021-09-08T19:38:16Z")

</div>

> [@Deming\_Wang](#):
>
> my\_js = “”"  
> console.log(‘hello world!’);  
> “”"  
> Javascript(my\_js)
> 
> but when I move it into a button click event function, nothing shows up in chrome console,  
> button = widgets.Button(  
> description=‘Button’,  
> disabled=False,  
> button\_style=’’,  
> tooltip=‘Button’,  
> icon=‘check’  
> )
> 
> def on\_button\_clicked(b):  
> my\_js = “”"  
> console.log(‘Hello world2!’);  
> “”"  
> Javascript(my\_js)
> 
> button.on\_click(on\_button\_clicked)
> 
> display(button)

You can use triple back-ticks to embed code:

````auto
```
this is some code
```

````

Now, I believe the reason that a bare `display` doesn’t work is that the comm message isn’t handled by any particular cell, so only the JupyterLab log console receives it. For whatever reason, this does not execute Javascript display objects. You could solve this by using the HTML display object with a `<script>` tag instead, or use an `Output` widget:

```python3
from IPython.display import HTML, Javascript
button = widgets.Button(
    description='Button',
    disabled=False,
    button_style='',
    tooltip='Button',
    icon='check'
)
        
output = widgets.Output()

@output.capture(clear_output=True)
def on_button_clicked(b):
    my_js = """
    console.log('hello world!');
    """
    display(Javascript(my_js))

button.on_click(on_button_clicked)
display(button, output)

```

---

<div class="post-metadata">

**Author:** ![Deming\_Wang](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/deming_wang/32/5155_2.png) [@Deming\_Wang](https://discourse.jupyter.org/u/Deming_Wang)\
**Post date:** [September 8, 2021, 8:40pm UTC](https://discourse.jupyter.org/t/call-javascript-from-a-button-click-event/10675/5 "2021-09-08T20:40:21Z")

</div>

Thanks! this works.

I am able to change css with javascript. Here is my test script, and I believe display(button, output) makes it work.

from IPython.display import HTML, Javascript  
import ipywidgets as widgets

button = widgets.Button(  
description=‘Button’,  
disabled=False,  
button\_style=’’,  
tooltip=‘Button’,  
icon=‘check’  
)

output = widgets.Output()  
@output.capture(clear\_output=True)  
def on\_button\_clicked(b):  
my\_js = “”"  
console.log(“click called”);  
xx = document.getElementsByClassName(“widget-button”);  
console.log(xx.length);  
xx[3].style.border=“1px solid orange”;  
“”"  
display(Javascript(my\_js))

button.on\_click(on\_button\_clicked)

display(button, output)

My appliation uses sidecar with widget layout. I will test it out. Will let you know how’s going.

Thanks again.

---

<div class="post-metadata">

**Author:** ![krassowski](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/krassowski/32/1685_2.png) [@krassowski](https://discourse.jupyter.org/u/krassowski)\
**Post date:** [September 9, 2021, 8:14am UTC](https://discourse.jupyter.org/t/call-javascript-from-a-button-click-event/10675/6 "2021-09-09T08:14:46Z")

</div>

I also answered your question on Stack Overflow earlier: [python - Call Javascript from a button click event function in Jupyter Lab or Jupyter notebook - Stack Overflow](https://stackoverflow.com/a/69106455/6646912).