PyScript- InputBox和Button onclick實作練習

今天要介紹的是用Pyscript設計HTML,Inputbox和Button onclick的寫法,整個頁面主要有:輸入框,Button和輸出值三個部分。

其實我當初在猶豫要不要把"接收textbox輸入值"拆開來講,不過為了省事還是放一起講好了:)

輸入框: 顧名思義,就是把要打的字打上去。

Button: 點下去後,會去接收你輸入的值,再將其輸出到網頁裡的其他區塊。(此範例中限制接收的輸入值只能是數字)

功能就這些,但應該能幫助到遇到相關問題(botton on-click 和 接收輸入值)的開發者們。

老樣子,先上程式碼:

<body>
<h2 id="target"></h2>
<div id="outputDiv"  style="margin-top: 10px;margin-bottom: 10px;"></div>
<h3 id="target2"></h3>
<br>

  <py-inputbox id="how-many" style="margin-bottom: 10px;">
</py-inputbox>

<py-script>
input_num = Element("how-many")

out = Element("target")
out2 = Element("target2")

def click_event(*ags, **kwgs):
  n = int(input_num.value)
  str_n = str(input_num.value)
  out.write(n)
  pyscript.write('outputDiv',n)
  out2.element.innerText += str_n
</py-script>

<py-button id="new-task-btn" label="Add text">
def on_click(evt):
  click_event()
</py-button>

  </body>

輸出頁面:

 我這裡限制了接收的值只能是int的形式,所以除了數字外無論你再怎麼點擊button都不會有反應!

今天若是輸入:666

輸出頁面:

 其實還滿容易的不是嗎!

希望有幫助到各位開發者們,我們下次見~

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值