How to create a form in Brython where entering a name hides the form and displays a welcome message in a div?

Question

I want to implement a functionality using Brython where I have a form that allows me to enter my name. Once I enter my name and submit the form, I want the form to disappear and a div to appear with a welcome message displaying "Welcome, [name]" where [name] is the name I entered.

I have tried the following code, but it's not working as expected:

from browser import document, html, window

storage = window.localStorage 
form = document.getElementById("name-form")
div = document.getElementById("welcome")
if storage["name"]:
    form.style.display = "none"
    div.style.display = "block"
else:
    form.style.display = "block"
    div.style.display = "none"

However, when I run the code, I encounter the following error: "brython.js:6594 Uncaught dir ... [full error message]"

I have verified that I have included the necessary Brython script tags in my HTML file. Can anyone provide guidance on how to achieve this functionality correctly using Brython?

error message:

brython.js:6594 Uncaught dir at Object.eval [as $factory] (eval at $B.$make_exc (https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.js:7807:20), :5:15) at $B.attr_error (https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.js:7834:27) at $B.JSObj.getattribute (https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.js:9336:10) at $B.$getattr (https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.js:6582:9) at b.dir (https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.js:6322:35) at offer_suggestions_for_attribute_error (https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.js:7898:13) at $B.error_trace (https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.js:8031:117) at $B.show_error (https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.js:8038:42) at $B.handle_error (https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.2/brython.js:8046:4) at $B.loop (https://cdnjs.clou

The "full error message" would be interesting. – Klaus D. May 27 '23 at 17:11 — Klaus D., May 27 '23 at 17:11
Ok, i've edited and put the message there – One Piece May 27 '23 at 22:49 — One Piece, May 27 '23 at 22:49

score 0 · Answer 1 · answered Jun 02 '23 at 18:48

It's hard to interpret the error message without the complete context, but here is a minimal example that does what you want:

<script type="text/python">
from browser import bind, document, html, window

@bind('#name-form', 'click')
def welcome(ev):
    form = document.select_one('form')
    name = document["name-input"].value
    form.remove()
    document["welcome"].text = f'Welcome, {name} !'
</script>

<form method="get" action="#">
<input id="name-input" name="name">
<input id="name-form" type="submit">
</form>

<div id="welcome"></div>

How to create a form in Brython where entering a name hides the form and displays a welcome message in a div?

1 Answers1