` này trống, nghĩa là không có gì sẽ được hiển thị trên màn hình cho đến khi chúng ta thêm nội dung vào nó. Chúng ta cũng đặt `id` cho nó để có thể dễ dàng lấy nó bằng JavaScript. Quay lại tệp `app.js` và tạo một hàm trợ giúp mới `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Hàm này khá đơn giản: với một *id* phần tử và *text*, nó sẽ cập nhật nội dung văn bản của phần tử DOM có `id` tương ứng. Hãy sử dụng phương pháp này thay cho thông báo lỗi trước đó trong hàm `login`: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Bây giờ nếu bạn cố gắng đăng nhập bằng tài khoản không hợp lệ, bạn sẽ thấy điều gì đó như thế này:  Bây giờ chúng ta có văn bản lỗi hiển thị trực quan, nhưng nếu bạn thử với trình đọc màn hình, bạn sẽ nhận thấy rằng không có gì được thông báo. Để văn bản được thêm động vào trang được thông báo bởi trình đọc màn hình, nó sẽ cần sử dụng một thứ gọi là [Vùng Trực tiếp (Live Region)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Ở đây chúng ta sẽ sử dụng một loại vùng trực tiếp cụ thể gọi là cảnh báo: ```html ``` Thực hiện hành vi tương tự cho các lỗi trong hàm `register` (đừng quên cập nhật HTML). ## Hiển thị thông tin trên bảng điều khiển Sử dụng các kỹ thuật chúng ta vừa thấy, chúng ta cũng sẽ xử lý việc hiển thị thông tin tài khoản trên trang bảng điều khiển. Đây là cách một đối tượng tài khoản nhận được từ máy chủ trông như thế nào: ```json { "user": "test", "currency": "$", "description": "Test account", "balance": 75, "transactions": [ { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 }, { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 }, { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 } ], } ``` > Lưu ý: để làm cho công việc của bạn dễ dàng hơn, bạn có thể sử dụng tài khoản `test` đã được điền sẵn dữ liệu. ### Nhiệm vụ Hãy bắt đầu bằng cách thay thế phần "Balance" trong HTML để thêm các phần tử giữ chỗ: ```html

Balance:

``` Chúng ta cũng sẽ thêm một phần mới ngay bên dưới để hiển thị mô tả tài khoản: ```html

``` ✅ Vì mô tả tài khoản hoạt động như một tiêu đề cho nội dung bên dưới nó, nó được đánh dấu ngữ nghĩa như một tiêu đề. Tìm hiểu thêm về cách [cấu trúc tiêu đề](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) quan trọng đối với khả năng truy cập và xem xét kỹ lưỡng trang để xác định những gì khác có thể là tiêu đề. Tiếp theo, chúng ta sẽ tạo một hàm mới trong `app.js` để điền vào phần giữ chỗ: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Đầu tiên, chúng ta kiểm tra rằng chúng ta có dữ liệu tài khoản cần thiết trước khi tiếp tục. Sau đó, chúng ta sử dụng hàm `updateElement()` mà chúng ta đã tạo trước đó để cập nhật HTML. > Để làm cho hiển thị số dư đẹp hơn, chúng ta sử dụng phương thức [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) để buộc hiển thị giá trị với 2 chữ số sau dấu thập phân. Bây giờ chúng ta cần gọi hàm `updateDashboard()` của mình mỗi khi bảng điều khiển được tải. Nếu bạn đã hoàn thành [bài tập bài học 1](../1-template-route/assignment.md), điều này sẽ khá đơn giản, nếu không bạn có thể sử dụng triển khai sau. Thêm đoạn mã này vào cuối hàm `updateRoute()`: ```js if (typeof route.init === 'function') { route.init(); } ``` Và cập nhật định nghĩa các tuyến với: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` Với thay đổi này, mỗi khi trang bảng điều khiển được hiển thị, hàm `updateDashboard()` sẽ được gọi. Sau khi đăng nhập, bạn sẽ có thể thấy số dư tài khoản, loại tiền và mô tả. ## Tạo các hàng bảng động với mẫu HTML Trong [bài học đầu tiên](../1-template-route/README.md), chúng ta đã sử dụng các mẫu HTML cùng với phương thức [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) để triển khai điều hướng trong ứng dụng của chúng ta. Các mẫu cũng có thể nhỏ hơn và được sử dụng để điền động các phần lặp lại của trang. Chúng ta sẽ sử dụng cách tiếp cận tương tự để hiển thị danh sách các giao dịch trong bảng HTML. ### Nhiệm vụ Thêm một mẫu mới trong `` của HTML: ```html ``` Mẫu này đại diện cho một hàng bảng duy nhất, với 3 cột mà chúng ta muốn điền: *ngày*, *đối tượng* và *số tiền* của một giao dịch. Sau đó, thêm thuộc tính `id` này vào phần tử `` của bảng trong mẫu bảng điều khiển để dễ dàng tìm thấy bằng JavaScript: ```html ``` HTML của chúng ta đã sẵn sàng, hãy chuyển sang mã JavaScript và tạo một hàm mới `createTransactionRow`: ```js function createTransactionRow(transaction) { const template = document.getElementById('transaction'); const transactionRow = template.content.cloneNode(true); const tr = transactionRow.querySelector('tr'); tr.children[0].textContent = transaction.date; tr.children[1].textContent = transaction.object; tr.children[2].textContent = transaction.amount.toFixed(2); return transactionRow; } ``` Hàm này làm đúng như tên gọi của nó: sử dụng mẫu chúng ta đã tạo trước đó, nó tạo một hàng bảng mới và điền nội dung của nó bằng dữ liệu giao dịch. Chúng ta sẽ sử dụng điều này trong hàm `updateDashboard()` để điền vào bảng: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` Ở đây chúng ta sử dụng phương thức [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) tạo một đoạn DOM mới mà chúng ta có thể làm việc, trước khi cuối cùng gắn nó vào bảng HTML của chúng ta. Vẫn còn một điều nữa chúng ta phải làm trước khi đoạn mã này có thể hoạt động, vì hàm `updateElement()` của chúng ta hiện chỉ hỗ trợ nội dung văn bản. Hãy thay đổi mã của nó một chút: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` Chúng ta sử dụng phương thức [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) vì nó cho phép gắn cả văn bản hoặc [DOM Nodes](https://developer.mozilla.org/docs/Web/API/Node) vào một phần tử cha, điều này hoàn hảo cho tất cả các trường hợp sử dụng của chúng ta. Nếu bạn thử sử dụng tài khoản `test` để đăng nhập, bạn sẽ thấy danh sách giao dịch trên bảng điều khiển 🎉. --- ## 🚀 Thử thách Hãy cùng nhau làm cho trang bảng điều khiển trông giống như một ứng dụng ngân hàng thực sự. Nếu bạn đã định dạng ứng dụng của mình, hãy thử sử dụng [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) để tạo [thiết kế đáp ứng](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) hoạt động tốt trên cả thiết bị máy tính và di động. Dưới đây là một ví dụ về trang bảng điều khiển đã được định dạng:  ## Câu hỏi sau bài giảng [Câu hỏi sau bài giảng](https://ff-quizzes.netlify.app/web/quiz/46) ## Bài tập [Refactor và thêm bình luận vào mã của bạn](assignment.md) --- **Tuyên bố miễn trừ trách nhiệm**: Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn thông tin chính thức. Đối với các thông tin quan trọng, nên sử dụng dịch vụ dịch thuật chuyên nghiệp bởi con người. Chúng tôi không chịu trách nhiệm cho bất kỳ sự hiểu lầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này.