iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 10
1
Modern Web

JS 學習歷程系列 第 10

結衣我老婆啦 - 情侶理想身高差 * onClick(二)

接續昨天的理想老婆練習題,今天要來上 JS 了:

  1. 首先我們來取出身高的值:
var myHeightNum=document.querySelector('.myHeight').value
  1. 但是取出值以後,我們如果用 typeof 去查詢,會發現 myHeightNum 取出的值是 string:
console.log(typeof(myHeightNum));

https://ithelp.ithome.com.tw/upload/images/20190910/20119922EMEbRj5fJB.png

  1. 所以記得要來轉型,將parseInt()包圍document.querySelector('.myHeight').value變成:
var myHeightNum=parseInt(document.querySelector('.myHeight').value)
  1. 接下來要寫按鈕啦,我們希望按鈕被按下(onclick)後,執行計算的 function,所以寫法就是:
document.querySelector('.calcul').onclick = function(){}
  1. 來測試 onclick 有沒有被正常運作,在裡面加入 alert('Hello') 玩弄(誤)一下它:
document.querySelector('.calcul').onclick = function(){
    alert('Hello');
}

https://ithelp.ithome.com.tw/upload/images/20190910/2011992239JNAaUk0x.png

  1. 把 function 寫好後,記得要把我們在第3步寫好的取值丟到 function 去執行它,接著先把 alert 裡面的內容改為myHeightNum * 1.09,輸入一個身高按下計算它的按鈕把玩一下它吧:

https://ithelp.ithome.com.tw/upload/images/20190910/20119922G8cGST7p16.jpg

  1. 嗯,剩下的明天再繼續!

上一篇
結衣我老婆啦 - 情侶理想身高差 * onClick(一)
下一篇
結衣我老婆啦 - 情侶理想身高差 * onClick(三)
系列文
JS 學習歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2020-01-21 09:04:14

理想老婆練習題是什麼 /images/emoticon/emoticon16.gif

我要留言

立即登入留言