Jupyter widgets: How to use 'Button' to update content of 'Label' based on value of 'FloatText'?

Question

I am unable to use widgets in Jupyter to make something that actually should be simple but I can't make it work: I want a GUI where the user presses a 'Button' to update the content of a 'Label' based on value of 'FloatText'

I tried many things to no avail. Here two examples:

Example 1:

from ipywidgets import FloatText, Button, Label, interact

t_str1 = FloatText( description='Strain in %:', value='3' )

b_cs   = Button( description='Compute Stress' )

t_str2 = Label( value='Waiting' )

display( t_str1 ); display( b_cs )

def compute_stress( x ):
    t_str2 = Label( value='Stress = ' + str(x+3)+ 'MPa' )
    display( t_str2 );
    
interact( compute_stress, x=t_str1 );

Result of example 1:

Example 2:

from ipywidgets import FloatText, Button, Label, interact

t_str1 = FloatText( description='Strain in %:', value='3' )

b_cs   = Button( description='Compute Stress' )

t_str2 = Label( value='Waiting' )

display( t_str1 ); display( b_cs ); display( t_str2 );

def compute_stress( x ):
    t_str2 = Label( value='Stress = ' + str(x+3)+ 'MPa' )
    
interact( compute_stress, x=t_str1 );

Result of example 2:

This is what I would like to obtain

Answer 1

For your button to work, you nedd to associate an on_click function to it. You then also won't need the interact function to do what you want. Additionnally, to ensure that the widgets appear in the layout you want, you can use VBox. Here is what the code looks like when you implement these changes:

import ipywidgets as widgets

t_str1 = widgets.FloatText( description='Strain in %:', value='3' )
b_cs   = widgets.Button( description='Compute Stress' )
t_str2 = widgets.Label(value='Waiting' )

vb=widgets.VBox([t_str1,b_cs,t_str2])

def on_click_compute_stress(b):
    t_str2.value='Stress = '+str(t_str1.value+3)+'MPa'

b_cs.on_click(on_click_compute_stress)

display(vb)

And the output gives: