How do you input and output text with Pyscript?

Question

I’m learning py-script where you can use <py-script></py-script> in an HTML5 file to write Python Code. As a python coder, I would like to try web development while still using python, so it would be helpful if we could output and input information using py-script.

For example, could someone explain how to get this function to work:

<html>
     <head>
          <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
          <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
     </head>
     <body>
          <div>Type an sample input here</div>
          <input id = “test_input”></input>
          <-- How would you get this button to display the text you typed into the input into the div with the id, “test”--!>
          <button id = “submit-button” onClick = “py-script-function”>
          <div id = “test”></div>
          <div 
<py-script>

<py-script>
     </body>
</html

I would appreciate it and I hope this will also help the other py-script users.

score 9 · Accepted Answer · edited Jun 18 '23 at 21:46

I checked source code on GitHub and found folder examples.

Using files todo.html and todo.py I created this index.html
(which I tested using local server python -m http.server)

Some elements I figured out because I have some experience with JavaScript and CSS - so it could be good to learn JavaScript and CSS to work with HTML elements.

index.html

<!DOCTYPE html>

<html>

<head>
  <!--<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />-->
  <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>

<body>
  <div>Type an sample input here</div>
  <input type="text" id="test-input"/>
  <button id="submit-button" type="submit" pys-onClick="my_function">OK</button>
  <div id="test-output"></div>

<py-script>
from js import console

def my_function(*args, **kwargs):

    #print('args:', args)
    #print('kwargs:', kwargs)

    console.log(f'args: {args}')
    console.log(f'kwargs: {kwargs}')
    
    text = Element('test-input').element.value

    #print('text:', text)
    console.log(f'text: {text}')

    Element('test-output').element.innerText = text
</py-script>

  </body>
</html>

Here screenshot with JavaScript console in DevTool in Firefox.

It needed longer time to load all modules
(from Create pyodine runtime to Collecting nodes...)

Next you can see outputs from console.log().
You may also use print() but it shows text with extra error writing to undefined ....

Can someone provide a version that works in the lateast Pyscript release? — Maksiks, Jul 28 '23 at 10:11
@Maksiks it seems code is still correct for latest Pyscript - so it doesn't need changes. You can even see `Element('test-output').element.innerText = "Hello World!"` in documentation [How to write content to the page](https://docs.pyscript.net/latest/tutorials/writing-to-page.html). It seems they also added shorter version `display("Hello World!", 'test-output')`. I think version `pyscript.write('test-output', "Hello World")` may also work. — furas, Aug 03 '23 at 12:12
@Maksiks BTW: my code may need changes in links to JavaScript code - `latest` instead of `alpha`. It may need also `py-click` instead of `pys-onClick`. But I didn't check it yet, so I can't confirm it. Maybe later I will change code in answer when I check it. — furas, Aug 03 '23 at 12:13
it's been a few days and I finished it after realizing I need to use py-click instead of pys-onClick — Maksiks, Aug 04 '23 at 15:37

score 2 · Answer 2 · answered May 06 '22 at 21:24

2

An alternative to way to display the output would be to replace the

Element('test-output').element.innerText = text

by

pyscript.write('test-output', text)

answered May 06 '22 at 21:24

Temesgen Tewolde

21
3

How do you input and output text with Pyscript?

2 Answers2

Linked