✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

How to implement reset button to clear output

I am trying to implement a reset button to clear input. But I got stuck on: once the reset button is push, I cannot aggregate again. Here is a sample of my idea:

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div([
    html.Div(id='output'),
    html.Button('Input',id='input_button',n_clicks=0),
    html.Button('Reset',id='reset_button', n_clicks=0),
])

@app.callback(Output('output','children'),
             [Input('input_button','n_clicks'),
              Input('reset_button','n_clicks')])
def update(input_clicks, reset):
    if input_clicks>0 and reset==0:
        return f'there are {input_clicks} input clicks, and {reset} reset_clicks.'
    elif reset>0:
        reset=0
        return 'all clear'
    
app.run_server()

I found this thread to be very similar to my question, but couldn’t quite figure out how to do it still. Can someone give me some suggestion?

Thanks in advance.

Hi mike, hope the code below helps.
spiraf9fLe

import dash
from dash.dependencies import Input, Output
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div([
    html.Div(id='output'),
    html.Button('Input',id='input_button',n_clicks=0),
    html.Button('Reset',id='reset_button', n_clicks=0),
], style={'marginTop':20, 'marginLeft':20})

@app.callback(Output('output','children'),
             [Input('input_button','n_clicks')])
def update(input_clicks):
    if input_clicks>0:
        return f'there are {input_clicks} input clicks.'

@app.callback(Output('input_button','n_clicks'),
             [Input('reset_button','n_clicks')])
def update(reset):
    return 0


if __name__ == '__main__':
    app.run_server(debug=True)

Thank you! This is very helpful. I didn’t know that the button itself can be the destination of a output, so your example will be very useful for me.

I really love this solution, as I’m having a similar issue. However I’m having trouble as I have multiple ‘reset’ buttons (same id, using pattern matching callbacks). Do you have any idea as to what I would return to make this work for multiple ‘reset’ buttons?