iT邦幫忙

第 12 屆 iThome 鐵人賽
DAY 17
0
Modern Web

JavaScript 菜鳥研究室系列 第 17 篇

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

12th鐵人賽
594 瀏覽

  • 分享至 

  • 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 篇
  1. 26
    菜鳥日記Day 26－Promise承諾
  2. 27
    菜鳥日記Day 27－setTimeout與setInterval
  3. 28
    菜鳥日記Day 28－如何為時鐘刻上數字?
  4. 29
    菜鳥日記Day 29－用Chart.js製作圖表
  5. 30
    菜鳥日記Day 30－用JSON-Server自建雲端資料庫
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22201 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙