iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
Modern Web

JavaScript 菜鳥研究室系列 第 17

菜鳥日記Day 17-設定函式category與roomDetails

  • 分享至 

  • xImage
  •  

接下來我們要透過兩支函式,來設定不同畫面的文字與圖片資訊
https://ithelp.ithome.com.tw/upload/images/20200929/20130039ZIlwF4zXv6.png

  1. 建立函式category
  2. 建立變數str為空值
  3. 在陣列roomsData中跑forEach迴圈,並建立參數item
  4. 當category迴圈被執行時,以str+=的方式顯示房型名稱、價格與網站資訊
    備註:裡的.代表當前頁面的意思
  5. 在變數roomType以innerHTML的方式插入str字串

https://ithelp.ithome.com.tw/upload/images/20200929/20130039HDbqMPsYQD.png

  1. 建立函式roomDetails
  2. 建立變數str為空值
  3. 在陣列roomsData中跑forEach迴圈,並建立參數item
  4. 當roomDetails迴圈被執行時,以str+=的方式顯示圖片、房型名稱、價格與房型資訊
  5. 在變數roomType以innerHTML的方式插入str字串

以往我們在撰寫HTML網站內容時,不同的頁面要寫在不同的HTML檔案裡。當因為這次我們以動態方式擷取網址資訊,我只要建立一個HTML檔案就可以,就能夠動態顯示7個頁面的資訊,在使用上非常方便。


上一篇
菜鳥日記Day 16-透過getData函式說明參數的意義
下一篇
菜鳥日記Day 18-如何驗證使用者姓名&電話(Post API-part 1)
系列文
JavaScript 菜鳥研究室30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言