今天要介紹的是用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
輸出頁面:
其實還滿容易的不是嗎!
希望有幫助到各位開發者們,我們下次見~