iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 26
1
Modern Web

有角拾系列 第 26

# JS雜食-06--小實作之1

  • 分享至 

  • xImage
  •  

用HTML+純JS試作一表單,規格:

  1. 兩個輸入框
  2. 一個提交按鈕
  3. 點擊按鈕時顯示:輸入的兩個數字總和

前置作業

新增一資料夾至少包含以下三種檔案:index.html、style.css、main.js與對應資料夾結構中

|-scripts
|----main.js
|-styles
|----style.css
|-index.html

撰寫HTML

輸入框需要包覆在<form></form>之中;依序在<body></body>中填入<form></form><input>後,開始給予#id以便js操作,這邊的#id命名為starCalculator

<body>
  <form id="starCalculator">
    <p>
      <input type="number" placeholder="input a random number" id="starNumber1"> + <input type="number" placeholder="input a random number" id="starNumber2">
    </p>
    <input type="submit" id="submit">
  </form>
</body>

上一篇
# REACT JSX
下一篇
Star Calculator
系列文
有角拾30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言