سلام استاد مدائنی عزیز.
کدهای زیر رو بررسی بفرمایید. سوال من اینه که چرا وقتی از کنسول استفاده میکنم، آرایه من که شامل آبجکت هست رو نمایش میده اما در صفحه html وقتی میخوام نمایش بدم فقط آخرین اندیس آرایه رو نشون میده؟
از هر کدوم از for ها هم که استفاده کردم، نتیجه یکسان بود (Regular for, for-of, for-in, forEach)
کدهای HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo"></p>
<script src="app.js"></script>
</body>
</html>کدهای JavaScrip
let demo = document.getElementById('demo');
const array = [];
function Person(id, fname, lname, email, phone) {
this.id = id;
this.fname = fname;
this.lname = lname;
this.email = email;
this.phone = phone;
};
const generateID = () => {
return Math.floor(Math.random() * 1000);
};
const person_1 = new Person(generateID(), 'John', 'Doe', 'john.doe@gmail.com', 0912);
const person_2 = new Person(generateID(), 'Sarah', 'Lee', 'sarah.lee@gmail.com', 0911);
const person_3 = new Person(generateID(), 'Mina', 'Jax', 'mina.jax@gmail.com', 0913);
function createArray() {
for (let i = 0; i < arguments.length; i++) {
array.push(arguments[i]);
}
};
createArray(person_1, person_2, person_3);
for (let i = 0; i < array.length; i++) {
console.log(array[i].fname); // show all array index in console.log
demo.innerHTML = array[i].fname; // just show latest index in p tag
}
استاد مدائنی عزیز خودم حلش کردم. یدونه متغییر text تعریف کردم گذاشتمش تو حلقه for و مقادیر رو بهش اضافه کردم و بیرون حلقه مقدار text رو به تگ p دادم.
let text = '';
for (let i = 0; i < array.length; i++) {
console.log(array[i].fname);
text += `${array[i].fname}<br>`;
}
demo.innerHTML = text;اما سوالم اینه که چرا بدون این ترفند، تنها مقدار آخرین اندیس رو به تگ p اختصاص میداد؟