Funkcja nie odczytuje zmiennych globalnych

Question

Mój kod js

class Information
{
    constructor(h1, p)
    {
        this.h1 = h1;
        this.p = p;
    }
}

let info1 = new Information("Pierwsze info", "Opis pierwszego info");
let info2 = new Information("Drugie info", "Opis Drugiego info");

//document.getElementById('heading').innerHTML=info1.h1;
//document.getElementById('paragraph').innerHTML=info1.p;

function displayInfo()
{
    const heading = document.getElementById('heading');
    const paragraph = document.getElementById('paragraph');

    let infoNumber = 1;
    let info = "info"+infoNumber;

    heading.innerHTML = info.h1;
    paragraph.innerHTML = info.p;
}

window.onload = displayInfo;

Testując funkcję chciałem wyświetlić obiekty klasy information ze zmiennej info1

Sprawdziłem czy klasa działa i czy zmienne są prawidłowo zadeklarowane. Wszystko działa.

    let infoNumber = 1;
    let info = "info"+infoNumber;

zmienna info jest równa info1

    const heading = document.getElementById('heading');
    const paragraph = document.getElementById('paragraph');

    heading.innerHTML = info.h1;
    paragraph.innerHTML = info.p;

Przy próbie wyświetlenia zawartości klasy ze zmiennej info 1 wyświetla się Undefined

Co zrobić aby zmienne były zdefiniowane w funkcji?

Przeniesienie zmiennych do funckji skutkuje podobnie

Answer 1

Przeczytałem kilka razy i nie mogłem zrozumieć o co chodzi autorowi, aż w końcu mnie olśniło.
Kolega chce odczytywać zmienne globalne przy pomocy wygenerowanych identyfikatorów.
Zmienne globalne znajdują się w obiekcie window

Przetestuj kod:

var info1 = new Information("Pierwsze info", "Opis pierwszego info");
let infoNumber = 1;
let info = window[ "info"+infoNumber ];

Ważne, aby zmienna info1 została zadeklarowana przy pomocy słowa kluczowego var a nie let

Answer 2

W Twoim kodzie nie odwołujesz się do zmiennych, do których przypisujesz klasę Information

let info1 = new Information("Pierwsze info", "Opis pierwszego info");
let info2 = new Information("Drugie info", "Opis Drugiego info");

 zamiast

    heading.innerHTML = info.h1;
    paragraph.innerHTML = info.p;

np. zapisz

    heading.innerHTML = info1.h1;
    paragraph.innerHTML = info1.p;

 

 

sprawdź on-line

class Information
{
    constructor(h1, p)
    {
        this.h1 = h1;
        this.p = p;
    }
}
 
const info1 = new Information("Pierwsze info", "Opis pierwszego info");
const info2 = new Information("Drugie info", "Opis Drugiego info");
 
function displayInfo()
{
    const heading = document.getElementById('heading');
    const paragraph = document.getElementById('paragraph');
 
    let infoNumber = 1;
    let info = "info" + infoNumber;
 
    heading.innerHTML = info1.h1;
    paragraph.innerHTML = info1.p + ' ' + info;
}
 
window.onload = displayInfo;

 

Comments

W Twoim kodzie nie odwołujesz się do zmiennych, do których przypisujesz klasę Information

Rozumiem, ale ja chcę przechować tę liczbę 1 w innej zmiennej (infoNubmer), żeby później funkcja miała możliwość zmiany tej liczby na dwa, potem trzy itd. aby otrzymać info1, info2, info3 itd. Na razie jeszcze tego nie okodowałem, chciałem tylko sprawdzić jak zadziała, gdy infoNubmer jest równe 1, aby zmienna info miała wartość info1.

---

To chyba Tobie chodzi o to co opisał @tangarr;

var info1 = new Information("Pierwsze info", "Opis pierwszego info");
let infoNumber = 1;
let info = window[ "info"+infoNumber ];

to jako ciekawostkę, że można zapisać i tak np.

const info1 = new Information("Pierwsze info", "Opis pierwszego info");
let infoNumber = 1;
let info = eval(`info${infoNumber}`);

 

---

To chyba Tobie chodzi o to co opisał @tangarr

Dokładnie o to chodziło 

Answer 3

A próbowałeś "var"?
https://sentry.io/answers/difference-between-let-and-var-in-javascript/

btw. nie kumam co tu się dzieje, gdyż twoj obiekt info, jest lokalny i nie jest obiektem typu Klasy
 

    let info = "info"+infoNumber;
 
    heading.innerHTML = info.h1;
    paragraph.innerHTML = info.p;

 

Comments

btw. nie kumam co tu się dzieje, gdyż twoj obiekt info, jest lokalny i nie jest obiektem typu Klasy

zmienna info ma przechowywać kolejno wartości info1, info2, info3 (Po doklejeniu zmiennej infoNumber) i ta wartość ma być wykorzystana do funkcji innerHTML, aby wyświetliła się wartość ze zmiennej info1 (I potem kolejnych info2, info3 gdy okoduję konkatenację zmiennej infoNumber)