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

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>

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

Javascript Constructor and appending the results into a table in HTML

javascript

constructor