PyScript⑥（display関数）

display関数

APIのdisplay関数を使うと、簡単にブラウザ上にコンテンツを表示することができます・

このdisplay関数では、文字列だけではなくイメージやマークダウン、SVGデータ、jsonも表示することができます。

サンプルコード

APIdisplay関数の第１引数には、ページに表示するデータを設定します。

また必ずtargetパラメータを指定して、どこにコンテンツを表示するかを設定する必要があります。

[ソースコード]

clock.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
  <head>
  <title>Writing to the page</title>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>

  <body>
    <div id="display-write"></div>
    <button py-click="display_to_div()" id="display">Say Things!</button>

    <py-script>
    def display_to_div():
      display("I display things!", target="display-write")
      # display("I display things!", target="display-write", append=False)  # 追記しない
    </py-script>
  </body>
</html>

[ブラウザ表示]

ボタンを押すと、display関数で表示したデータが表示されることを確認できます。

ただ、ボタンを押すたびに何度も文字列が表示されてしまうのは困りますが、これはappendパラメータにFalseを設定することで対処できます😊