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

Question

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

Rin*_*ore 6 html python input output pyscript

I\xe2\x80\x99m 学习 py-script 可以在哪里使用<py-script></py-script>在 HTML5 文件中使用它来编写 Python 代码。作为一名Python编码员，我想在使用Python的同时尝试Web开发，因此如果我们能够使用py-script输出和输入信息将会很有帮助。

\n

例如，有人可以解释如何让这个功能发挥作用：

\n

<html>\n     <head>\n          <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />\n          <script defer src="https://pyscript.net/alpha/pyscript.js"></script>\n     </head>\n     <body>\n          <div>Type an sample input here</div>\n          <input id = \xe2\x80\x9ctest_input\xe2\x80\x9d></input>\n          <-- How would you get this button to display the text you typed into the input into the div with the id, \xe2\x80\x9ctest\xe2\x80\x9d--!>\n          <button id = \xe2\x80\x9csubmit-button\xe2\x80\x9d onClick = \xe2\x80\x9cpy-script-function\xe2\x80\x9d>\n          <div id = \xe2\x80\x9ctest\xe2\x80\x9d></div>\n          <div \n<py-script>\n\n<py-script>\n     </body>\n</html\n

Run Code Online (Sandbox Code Playgroud)\n

我将不胜感激，希望这也能帮助其他 py-script 用户。

\n

Answer 1

fur*_*ras 10

我在 GitHub 上检查了源代码并找到了文件夹Examples。

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

我想出一些元素是因为我有一些 JavaScript 和 CSS 经验 - 所以学习 JavaScript 和 CSS 来处理 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>

Run Code Online (Sandbox Code Playgroud)

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

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

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

归档时间：	3 年，6 月前
查看次数：	12042 次
最近记录：	2 年，2 月前