\
**Category:** Dash Python\
**Created:** [June 14, 2018, 5:05pm UTC](https://community.plotly.com/t/changing-html-p-element-with-callback-function/10933 "2018-06-14T17:05:37Z")\
**Posts on this page:** 7\
**Page:** 1
**Author:**  [@enq](https://community.plotly.com/u/enq)\
**Post date:** [June 14, 2018, 5:05pm UTC](https://community.plotly.com/t/changing-html-p-element-with-callback-function/10933/1 "2018-06-14T17:05:37Z")
Hello everyone,
I am trying to change the text of a html P element via a condition, defined in a callback function.
The P-element is initiated as follows:
`html.P(id = "status")`
and the callback function is
```
@app.callback(Output("status", "children"),
events = [Event("graph-update", "interval")])
def update_statusBar():
if (condition):
return{"data": "Health Status: NOk"}
else:
return{"data": "Health Status: Ok"}
```
Since nothing is shown in the Dash app, I am pretty sure that the “data” keyword in the return statement is wrong.
My goal is just to have either “Ok” or “NOk” on the P-element, depending on the condition. How do I achieve this the correct way?
Thanks in advance.
---
**Author:**  [@charleyferrari](https://community.plotly.com/u/charleyferrari)\
**Post date:** [June 14, 2018, 8:04pm UTC](https://community.plotly.com/t/changing-html-p-element-with-callback-function/10933/2 "2018-06-14T20:04:34Z")
`children` in this case is expected to be a string, so rather than returning a dict, see if just returning `"Health Status: NOk"` works.
---
**Author:**  [@enq](https://community.plotly.com/u/enq)\
**Post date:** [June 15, 2018, 8:54am UTC](https://community.plotly.com/t/changing-html-p-element-with-callback-function/10933/3 "2018-06-15T08:54:59Z")
thanks for the reply.
unfortunately, this did not solve the problem. Still, nothing appears in the P-element.
Is my goal generally possible with Dash or am I trying to do something that cannot work at all?
---
**Author:**  [@charleyferrari](https://community.plotly.com/u/charleyferrari)\
**Post date:** [June 18, 2018, 4:06pm UTC](https://community.plotly.com/t/changing-html-p-element-with-callback-function/10933/4 "2018-06-18T16:06:41Z")
@enq Can you create a toy app showing this behavior? This is something that should be pretty straight forward.
All you need to do for `Output`s and `Input`s is to name the component ID, and the component property (usually something like `value` for `dcc`s, but also things like `clickData` and `hoverData` for crossfiltering.) `Output`s usually refer to graphs (and thus you’re returning the component property `figure`, but you can just as easily refer to `children` to get the inside of an `html` tag.
In troubleshooting, I like to use `print` and watch my terminal to see the structure of the `Input` value. This might help you if the issue is you’re expecting a different data type.
---
**Author:**  [@enq](https://community.plotly.com/u/enq)\
**Post date:** [June 20, 2018, 12:10pm UTC](https://community.plotly.com/t/changing-html-p-element-with-callback-function/10933/5 "2018-06-20T12:10:59Z")
@charleyferrari, thanks again for your reply.
I think in that case I might be missing the `Input` somehow. I understood Input as something like a checkbox or a textfield, thats why I am not sure how to use it in this context.
below the code for a toy app:
```
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input, Event
import random
app = dash.Dash()
app.css.append_css({'external_url': 'https://codepen.io/amyoshino/pen/jzXypZ.css'})
app.layout = html.Div([
html.Div([
html.Div([
html.P(id = "status",
children=["init"])
]),
dcc.Interval(id="update",
interval=1000)
])
])
@app.callback(Output("status", "children"),
events = [Event("update", "interval")])
def update_statusBar():
pred = random.randint(0, 1)
if pred == 1:
return{"Health Status: nOk"}
else:
return{"Health Status: Ok"}
if __name__ == ' __main__':
app.run_server(debug=True)
```
In reality, the data for the `pred` variable origins from a file, which is read in each time the callback function runs.
---
**Author:**  [@Peter\_S](https://community.plotly.com/u/Peter_S)\
**Post date:** [June 21, 2018, 3:03pm UTC](https://community.plotly.com/t/changing-html-p-element-with-callback-function/10933/6 "2018-06-21T15:03:01Z")
@enq, the following appears to do what you want. Note the return statements are passing back pure simple strings, not sets or dictionaries. You can do lists as returns to children as well, but there’s no reason to for your use case.
```
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input, Event
import random
app = dash.Dash()
app.css.append_css({'external_url': 'https://codepen.io/amyoshino/pen/jzXypZ.css'})
app.layout = html.Div([
html.Div([
html.Div([
html.P(id = "status",
children=["init"])
]),
dcc.Interval(id="update",
interval=1000)
])
])
@app.callback(Output("status", "children"),
events = [Event("update", "interval")])
def update_statusBar():
pred = random.randint(0, 1)
if pred == 1:
return "Health Status: nOk"
else:
return "Health Status: Ok"
if __name__ == ' __main__':
app.run_server(debug=True)
```
---
**Author:**  [@enq](https://community.plotly.com/u/enq)\
**Post date:** [June 22, 2018, 8:10am UTC](https://community.plotly.com/t/changing-html-p-element-with-callback-function/10933/7 "2018-06-22T08:10:26Z")
@Peter_S
Thank you, solved it for me!