菜鳥日記Day 17－設定函式category與roomDetails - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 17

0

Modern Web

JavaScript 菜鳥研究室系列第 17 篇

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

12th鐵人賽

2020-10-01 11:28:31

552 瀏覽

分享至

接下來我們要透過兩支函式，來設定不同畫面的文字與圖片資訊

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

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

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

菜鳥日記Day 16－透過getData函式說明參數的意義

菜鳥日記Day 18－如何驗證使用者姓名&電話(Post API－part 1)

系列文

JavaScript 菜鳥研究室共 30 篇

目錄

RSS系列文訂閱系列文

7 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙