Generowanie losowego tytułu strony po wejściu na nią

Question

Witam, 

mam za zadanie stworzyć generator losowego napisu na stronie. Wykorzystałem do tego JS, jednak prawdopodobnie nie prawidłowo. Oto kod:

HTML

<header class="splash">
      <div class="splash-inner position-relative">
        <img src="images/background.png" class="w-100" alt="beans of Coffee" />
        <div class="description position-absolute">
          <p class="page-title font-weight-bold" id="home-title">
            HOME OF <span> ORIGINAL TASTES</span>
          </p>
        </div>
        <div class="discover position-absolute text-center">
          <p>DISCOVER</p>
          <i class="icon-arrow btn"></i>
        </div>
      </div>
    </header>

JS-1

import { select, settings } from './settings.js';
import Home from './components/Home.js';

const app = {
  initHome: function () {
    const thisApp = this;

    const homeElement = document.querySelector(select.containerOf.home);
    thisApp.home = new Home(homeElement);
  },

  initData: function () {
    const url = settings.db.url + '/' + settings.db.products;
    this.data = {};
    fetch(url)
      .then((rawResponse) => {
        return rawResponse.json();
      })
      .then((parsedResponse) => {
        this.data.products = parsedResponse;
      });
    console.log(url);
  },

  init: function () {
    const thisApp = this;
    thisApp.initData();
    thisApp.initHome();
  },
};

app.init();

JS-2

import { select } from '../settings.js';

class Home {
  constructor() {
    const thisHome = this;

    thisHome.getElements();
    thisHome.randomTitle();
  }

  getElements() {
    const thisHome = this;

    thisHome.dom = {
      homeTitle: document.querySelector(select.home.homeTitle),
    };
  }

  /* random text for home title */
  randomTitle() {
    const thisHome = this;

    thisHome.titles = [
      'Home of Original Tastes',
      'Real Venezuela, Real Coffee',
      'Taste Real Venezuela',
    ];

    thisHome.randTitle = thisHome.getRandomTitle(0, thisHome.titles + 1);
    thisHome.dom.homeTitle.innerHTML = thisHome.randTitle;

    console.log('titles', thisHome.homeTitleRand);
  }

  getRandomTitle(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }
}

export default Home;

JS-3

export const select = {
  containerOf: {
    home: 'splash',
  },
  home: {
    homeTitle: 'page-title',
  },
};

Proszę o pomoc, próbowałem też przez ID, ale efekt jest ten sam

Answer 1

getRandomTitle(min, max) {
   console.log(min,max);
     return Math.floor(Math.random() * (max - min)) + min;
   }

przekazujesz tutaj dokladnie pod wartoscia max nazwe, a nie numer 

(min max) - > 

• 0, "Home of Original Tastes,Real Venezuela, Real Coffee,Taste Real Venezuela1"

thisHome.titles + 1

to nie zwraca indeksu, powinienes dodac dlugosc 

thisHome.titles.length + 1

idąc dalej przez ten problem nie ustawia Ci tytulów 

np. obiekty wygladaja tak 

{
  dom: {
    homeTitle: null
  },
  titles: ["Home of Original Tastes", "Real Venezuela, Real Coffee", "Taste Real Venezuela"]
}


"titles", undefined

 

Comments

Dlaczego tak się dzieje z titles. Ustawiłem tablicy i odniosłem się do niej. W dodatku na stronie zamiast tekstu pojawiają mi się liczby co również jesst dziwne.

---

odniosłeś się do tablicy, a masz przeslac jej dlugosc do oblcizenia a tymczasem przesylasz tablice i dodajesz do niej +1 ... czyli jakbyś przesuwał indeks, tam jest po prostu blad ... stad dalej program sie sypie

---

Usunąłem dodatkowy indeks, ale nie zmienia to faktu, że

randomTitle() {
    const thisHome = this;

    thisHome.titles = [
      'Home of Original Tastes',
      'Real Venezuela, Real Coffee',
      'Taste Real Venezuela',
    ];

    thisHome.randTitle = thisHome.getRandomTitle(0, thisHome.titles.length);
    thisHome.dom.homeTitle.innerHTML = thisHome.randTitle;

    console.log('titles', thisHome.homeTitleRand);
  }

  getRandomTitle(min, max) {
    console.log(min, max);
    return Math.floor(Math.random() * (max - min)) + min;
  }

jest 'undefined'. 
Nie rozumiem dlaczego tak się dzieje skoro przekazuje tablice do DOM