Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

218
Vistas
Javascript Constructor and appending the results into a table in HTML

I am relatively new to coding. I am attempting to push the results I get from a random generator function which will have calculated the results from the min and max numbers of customers manually inputted.

The issue I have run into is that, though I have made it so that the results gets pushed into the empty arrays. When I console log, the object created from the constructor. There is no data being being pushed.


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)
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

I have spotted numerous problems with your code... listItem and this.customersEachHour are both undefined. You have hardcoded the value seattle as an id in render (which you never even call). You create a <tr> element for some reason but never use it. Also, you should simply wrap all of this into a 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>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda