@Infos;
sytuacja że chciem żeby po wpisaniu danego numeru imienia w divę to imię sie pokazało jak użyć do tego tablic ?
rozumiem, że masz na myśli input do wprowadzenia numeru (numeru indeksu) dla imienia w tablicy.
// długość length: 5 elementów
// indeks: 0 1 2 3 4
const imiona = [ 'Anna', 'Tomasz', 'Katarzyna', 'Piotr', 'Magdalena'];
[ kod przykładu on-line ]
<label for="indeksInput">Wprowadź liczbę (1-10):</label>
<input type="number" id="indeksInput" min="1" max="10" value="1" />
<button id="pokazButton">Wyświetl imię</button>
<div id="wynikDiv">Imię: <span></span></div>
<script>
const imiona = [
'Anna', 'Tomasz', 'Katarzyna', 'Piotr', 'Magdalena',
'Jan', 'Małgorzata', 'Krzysztof', 'Agnieszka', 'Michał'
];
const pokazButton = document.querySelector('#pokazButton');
pokazButton.addEventListener('click', () => {
const indeksElement = document.querySelector('#indeksInput');
const wynikDiv = document.querySelector('#wynikDiv span');
// Ponieważ indeksy w tablicy zaczynaja sie od zera (0), a dla ludzi
// bardziej naturalne jest numerowanie od jeden (1) użyto triku z - 1.
// Dla 0 mamy 1, 1 mamy 2, 2 mamy 3 itd.
// Użyj parseInt do konwersji wartości na liczbę
const indeks = parseInt(indeksElement.value) - 1;
// Sprawdź, czy wprowadzona wartość jest liczbą (isNaN)
// i czy indeks mieści się w zakresie tablicy
if (!isNaN(indeks) && (indeks >= 0 && indeks < imiona.length)) {
// Pobierz imię z tablicy na podstawie indeksu
const imie = imiona[indeks];
// Wyświetl imię w div span
wynikDiv.textContent = imie;
} else {
// Jeżeli wprowadzona wartość nie jest liczbą lub indeks jest poza zakresem,
// poinformuj użytkownika
wynikDiv.textContent = 'Nieprawidłowa wartość indeksu';
}
});
</script>
zapoznaj się też z: Tablica obiektów (Tablica asocjacyjna*).
Każdy element tablicy jest obiektem, a obiekty te mają różne właściwości (klucze i wartości), takie jak w tym przypadku: 'imie', 'nazwisko' i 'wiek'.
const osoby = [
{ 'imie': 'Anna', 'nazwisko': 'Kowalska', 'wiek': 30 },
{ 'imie': 'Tomasz', 'nazwisko': 'Nowak', 'wiek': 25 },
{ 'imie': 'Katarzyna', 'nazwisko': 'Wójcik', 'wiek': 35 },
{ 'imie': 'Piotr', 'nazwisko': 'Jankowski', 'wiek': 40 },
{ 'imie': 'Magdalena', 'nazwisko': 'Dąbrowska', 'wiek': 28 }
];
* - W JavaScript termin "tablica asocjacyjna" nie jest powszechnie używany. W praktyce, termin ten często jest mylący, ponieważ w JavaScript tablice i obiekty spełniają rolę struktur asocjacyjnych.
W przypadku JavaScript, tablice są specjalnym rodzajem obiektu, a indeksy są traktowane jako ciągi znaków (lub symboli), nawet jeśli są to liczby. W związku z tym, można by powiedzieć, że tablice w JavaScript mają pewne cechy tablic asocjacyjnych.
Jednak bardziej powszechnie używane i dokładniejsze określenie dla struktury danych z kluczami i wartościami, jak w tym przypadku, to "obiekt". W JavaScript często używa się obiektów do reprezentowania struktur asocjacyjnych, gdzie klucze są ciągami znaków (lub symbolami), a wartościami mogą być różne typy danych.
[ kod przykładu on-line ] <pre> [ 1 ] [ 2 ]
<label for="indeksInput">Wprowadź liczbę (1-5):</label>
<input type="number" id="indeksInput" min="1" max="5" value="1" />
<button id="pokazButton">Wyświetl dane</button>
<pre id="wynikPre"></pre>
<script>
const osoby = [
{ 'imie': 'Anna', 'nazwisko': 'Kowalska', 'wiek': 30 },
{ 'imie': 'Tomasz', 'nazwisko': 'Nowak', 'wiek': 25 },
{ 'imie': 'Katarzyna', 'nazwisko': 'Wójcik', 'wiek': 35 },
{ 'imie': 'Piotr', 'nazwisko': 'Jankowski', 'wiek': 40 },
{ 'imie': 'Magdalena', 'nazwisko': 'Dąbrowska', 'wiek': 28 }
];
const pokazButton = document.querySelector('#pokazButton');
pokazButton.addEventListener('click', () => {
const indeksElement = document.querySelector('#indeksInput');
const wynikPre = document.querySelector('#wynikPre');
// Ponieważ indeksy w tablicy zaczynaja sie od zera (0), a dla ludzi
// bardziej naturalne jest numerowanie od jeden (1) użyto triku z - 1.
// Dla 0 mamy 1, 1 mamy 2, 2 mamy 3 itd.
// Użyj parseInt do konwersji wartości na liczbę
const indeks = parseInt(indeksElement.value) - 1;
// Sprawdź, czy wprowadzona wartość jest liczbą (isNaN)
// i czy indeks mieści się w zakresie tablicy
if (!isNaN(indeks) && (indeks >= 0 && indeks < osoby.length)) {
// Pobierz imię z tablicy na podstawie indeksu
const dane = osoby[indeks];
// Wyświetl dane w pre
wynikPre.textContent = ` Imię: ${dane.imie}\n Nazwisko: ${dane.nazwisko}\n Wiek: ${dane.wiek}`;
} else {
// Jeżeli wprowadzona wartość nie jest liczbą lub indeks jest poza zakresem,
// poinformuj użytkownika
wynikPre.textContent = 'Nieprawidłowa wartość indeksu';
}
});
</script>