/codegym.vn/ - 111
Thêm sự kiện onclick cho button Add gọi đến hàm add_element_to_array() và Display
gọi đến hàm display_array().
Bước 2: Tạo biến x và khởi tạo bằng 0, x là chỉ số truy cập tới các phần tử trong
mảng.
1.
let
x
=
0
;
Bước 3: Tạo mảng array để lưu các giá trị được nhập vào
1.
let
array
=
Array
();
Bước 4: Xây dựng hàm add_element_to_array() để thêm mới một phần tử từ form
Lấy giá trị từ input-text và gán phần tử ở vị trí x trong mảng mỗi lần hàm
add_element_to_array() được gọi
Tăng giá trị x lên 1
Hiển thị phần tử vừa được thêm vào mảng
Gán giá trị rỗng cho input-text
Mã lệnh thực thi có thể như sau:
1.
function
add_element_to_array
()
{
2. array
[
x
]
=
document
.
getElementById
(
"txtValue"
).
value
;
3. alert
(
"Element: "
+
array
[
x
]
+
" Added at index "
+
x
);
4. x
++;
5. document
.
getElementById
(
"txtValue"
).
value
=
""
;
6.
}
Bước 5: Xây dựng hàm display_array() để hiển thị các phần tử trong mảng
Tạo biến e để lưu thẻ <hr> mỗi lần hiển thị một phần tử thẻ <hr> sử dụng để phân
cách các phần tử trong mảng: var e = "<hr/>"
Dùng vòng lặp for duyệt toàn bộ mảng: for (var i=0; i<array.length; i++)
Mỗi lần duyệt lấy giá trị của các phần tử cộng dồn vào biến e. Thêm thẻ <br/> cuối
mỗi lần duyệt.
Kết thúc lặp. Hiển thị biến e.
Mã lệnh thực thi có thể như sau:
1.
function
display_array
()
{
2.
let
e
=
"<hr/>"
;
3.
for
(
let
i
=
0
;
i
<
array
.
length
;
i
++)
{
4. e
+=
"Element "
+
i
+
" = "
+
array
[
i
]
+
"<br/>"
;
5.
}
6. document
.
getElementById
(
"result"
).
innerHTML
=
e
;
7.
}
Bước 6: Thực thi chương trình, quan sát kết quả.
Mã nguồn tham khảo:
https://github.com/codegym-vn/introduction-to-programming-with-
javascript/tree/dev/chapter-05/01-tao-va-thao-tac-voi-mang
Bài 2: Đảo ngược các phần tử trong mảng
Mục tiêu: Luyện tập tạo mảng, thao tác với mảng.
Mô tả:
