你如何使用 Pyscript 输入和输出文本？

Question

我正在学习 py-script，您可以在其中使用 <py-script></py-script> 在 HTML5 文件中编写 Python 代码。作为一名python coder，我想在使用python的同时尝试web开发，所以如果我们可以使用py-script输出和输入信息会很有帮助。

例如，谁能解释一下如何让这个函数工作：

<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

非常感谢，希望这也能帮助其他 py-script 用户。

Answer 1

我检查了source code on GitHub and found folder examples。

使用文件 todo.html and todo.py 我创建了这个 index.html
（我使用本地服务器测试 python -m http.server）

我发现了一些元素，因为我对 JavaScript 和 CSS 有一些经验 - 所以学习 JavaScript 和 CSS 与 HTML个元素。

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>

这里是 Firefox DevTool 中 JavaScript 控制台的屏幕截图。

加载所有模块需要更长的时间
（从 Create pyodine runtime 到 Collecting nodes...）

接下来您可以看到 console.log().
的输出您也可以使用 print() 但它显示带有额外错误的文本 writing to undefined ....

Answer 2

另一种显示输出的方法是替换

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

来自

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

你如何使用 Pyscript 输入和输出文本？

How do you input and output text with Pyscript?

html

python

input

output

pyscript