Javascript构造函数，并将结果附加到HTML中的表中

Question

我对编码比较陌生。我正试图推动我从随机生成器函数得到的结果，该函数将从手动输入的最小和最大客户数量中计算结果。

我遇到的问题是，虽然我已经使结果被推入空数组。当我控制台日志时，从构造函数创建的对象。没有数据正在被推送。

const hour = ["6am","7am","8am","9am","10am","11am","12pm","1pm","2pm","3pm","4pm","5pm","6pm","7pm",];
//NOTE: Constructor
function Location(city,minmax, averageConversionRate_cookieValue) {
this.name = city;
this.customerRange = [minmax[0], minmax[1]];
this.averageConversionRate_cookieValue = averageConversionRate_cookieValue;
this.customerEachRange = [];
this.cookiesSoldEachHour = [];
this.totalDailyCookies = 0;
}
//NOTE: Prototype
Location.prototype = {
constructor: Location,
estimatedCustomer_perHour: function() {
for (let a = 0; a < hour.length; a++) {
this.customersEachHour.push(
random(this.customerRange[0], this.customerRange[1])
);
}
},
cookiesPurchased_oneHour: function () {
for (let a = 0; a < this.customersEachHour.length; a++) {
this.cookiesSoldEachHour.push(
Math.floor(
this.customersEachHour[a] * this.averageConversionRate_cookieValue
)
);
}
},
changeCusRange: function (min, max) {
return (this.customerRange = [min, max]);
},
render() {
this.estimatedCustomer_perHour();
this.cookiesPurchased_oneHour();
const unorderedList = document.getElementById("seattle");
for (let a = 0; a < this.customersEachHour.length; a++) {
const listTable = document.createElement("tr");
listItem.textContent = `${hour[a]}: ${this.customersEachHour[a]} cookies`;
unorderedList.appendChild(listItem);
this.totalDailyCookies =
this.totalDailyCookies + this.customersEachHour[a];
}
const listTable = document.createElement("tr");
listTable.textContent = `Total: ${this.totalDailyCookies} cookies`;
unorderedList.appendChild(listItem);
},
}
//NOTE: Random fn()
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
//NOTE: Object creation
const seattle = new Location('Seattle', [23,65], 6.3);
const tokyo = new Location('tokyo',[3,24],1.2);
const dubai = new Location('dubai',[11,38],3.7);
const paris = new Location('paris',[20,38],2.3);
const lima = new Location('lima',[2,16],4.6)
console.log(seattle)

Answer 1

我已经发现了许多代码的问题…listItem和this.customersEachHour都是undefined。您已经将值seattle硬编码为render中的id(您甚至从未调用过)。出于某种原因，您创建了<tr>元素，但从未使用它。此外，您应该简单地将所有这些内容包装成class.

const hour = ["6am","7am","8am","9am","10am","11am","12pm","1pm","2pm","3pm","4pm","5pm","6pm","7pm"];
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
class Location {
constructor(city, minmax, averageConversionRate_cookieValue) {
this.name = city;
this.list = document.getElementById(this.name);
this.customerRange = [minmax[0], minmax[1]];
this.averageConversionRate_cookieValue = averageConversionRate_cookieValue;
this.customersEachHour = [];
this.cookiesSoldEachHour = [];
this.totalDailyCookies = 0;
this.render();
}

estimatedCustomer_perHour() {
for (let a = 0; a < hour.length; a++) {
this.customersEachHour.push(
random(this.customerRange[0], this.customerRange[1])
);
}
}

cookiesPurchased_oneHour() {
for (let a = 0; a < this.customersEachHour.length; a++) {
this.cookiesSoldEachHour.push(
Math.floor(
this.customersEachHour[a] * this.averageConversionRate_cookieValue
)
);
}
}

changeCusRange(min, max) {
return (this.customerRange = [min, max]);
}

render() {
this.estimatedCustomer_perHour();
this.cookiesPurchased_oneHour();
for (let a = 0; a < this.customersEachHour.length; a++) {
let item = document.createElement("li");
item.textContent = `${hour[a]}: ${this.customersEachHour[a]} cookies`;
this.list.append(item);
this.totalDailyCookies = this.totalDailyCookies + this.customersEachHour[a];
}
let total = document.createElement("li");
total.textContent = `Total: ${this.totalDailyCookies} cookies`;
this.list.append(total);
}
}
const seattle = new Location('Seattle', [23,65], 6.3);
console.log(seattle);

<ul id="Seattle"></ul>