• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Dodawanie i usuwanie z tablicy elementów

Object Storage Arubacloud
+1 głos
127 wizyt
pytanie zadane 1 kwietnia w JavaScript przez Infos Użytkownik (570 p.)
otagowane ponownie 1 kwietnia przez Infos

Witam potrzebuje się dowiedzieć dwóch a nawet 3 rzeczy 1.jak zweryfikować jaką opcje wybrałem w tagach <option> i 2.jak dodawać elementy do tablicy ? I 3.jak usuwać elementy z tablicy bo wpadłem na pomysł sortowania kod: 

const Elektronika = [""];

const  jedzienie = [""];

const Meble = [""];

function posortuj()
{
    
    
    
    
}

I dalej nie wiem co zrobić 

<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <title>srotownik!</title>
  <link rel="stylesheet" href="scena.css" type="text/css">
  <script src="kulisy.js">
  </script>
</head>
<body>
  
  <div id="dodawanie"> DODAJ NOWY PRZEDMIOT !
    <br>
    <br>
    <select id="kategoria">
      <option>Elektronika</option>
      <option>jedzienie</option>
      <option>Meble</option>
      
      
    </select>
    
  <input type="text" id="nowy" > 
   
    <input type="button" value="dodaj" onclick="posortuj()">
  
    
    
    
  </body>
</html>

 

Oczywiście jeszcze później dodam opcje wypisywania z tablicy elementów ale to później .pomoże ktoś z góry dziękuję?

komentarz 1 kwietnia przez VBService Ekspert (252,520 p.)
edycja 1 kwietnia przez VBService

BTW, deklaracja pustej tablicy

const a = [];
const b = new Array();

Sprawdź

const a = [];
const b = new Array();

const c = [""];

console.log('a:', a.length); // 0
console.log('b:', b.length); // 0
console.log('c:', c.length); // 1

 

2 odpowiedzi

+1 głos
odpowiedź 1 kwietnia przez Fiji404 Użytkownik (860 p.)

Jeśli chcesz sprawdzić jaką opcję wybrałeś, to najpierw każdemu <option> warto nadać z osobna własny atrybut "value", gdzie wartość z tego atrybutu będzie reprezenotować wartość jaka została wybrana dla tego select'a 
przykład
 

<select>
  <option value="1">Opcja 1</option>
  <option value="2">Opcja 2</option>
  <option value="3">Opcja 3</option>
  <option value="4">Opcja 4</option>
</select>
const sel = document.querySelector('select');

sel.addEventListener('change', () => {
  console.log(sel.value); // np. "1"
  if (sel.value === "2") {
    //... 
  }
})

Na reszte pytań (pewnie i na pierwsze), łatwo byś znalazł odpowiedzi.. czytając dokumentacje albo po prostu goglując to pytania :) ale ok, przykład
 

const tablica = [1, 2, 3]; 

tablica.push(4); // dodaje do tablicy element na jej koniec 

// tablica -> [1, 2, 3, 4]

tablica.pop(); // usuwa ostatni element tablicy 

// tablica -> [1, 2, 3]
komentarz 1 kwietnia przez VBService Ekspert (252,520 p.)
edycja 1 kwietnia przez VBService

Przez element.value działa bez atrybutu value

<select id="kategoria">
  <option disabled selected>Wybierz kategorię</option>
  <option>Elektronika</option>
  <option>Jedzienie</option>
  <option>Meble</option>
</select>
<pre id="wybor"></pre>

<script>
  const s = document.querySelector('#kategoria');
  s.addEventListener('change', _=> {
    document.querySelector('#wybor').textContent = s.value;
  }); 
</script>

 

BTW

<select id="kategoria">
  <option disabled selected>Wybierz kategorię</option>
  <option>Elektronika</option>
  <option>Jedzienie</option>
  <option>Meble</option>
</select>
<pre id="wybor"></pre>
 
<script>
  const s = document.querySelector('#kategoria');
  s.addEventListener('change', _=> {
    document.querySelector('#wybor').textContent = s.options[s.selectedIndex].text;
  }); 
</script>
<select id="kategoria">
  <option disabled selected>Wybierz kategorię</option>
  <option>Elektronika</option>
  <option>Jedzienie</option>
  <option>Meble</option>
</select>
<pre id="wybor"></pre>
 
<script>
  const s = document.querySelector('#kategoria');
  s.addEventListener('change', _=> {
    document.querySelector('#wybor').textContent = s.options[s.selectedIndex].value;
  }); 
</script>

 


 

<select id="kategoria">
  <option disabled selected>Wybierz kategorię</option>
  <option value="Lorem1">Elektronika</option>
  <option value="Lorem2">Jedzienie</option>
  <option value="Lorem3">Meble</option>
</select>
<pre id="wybor"></pre>
 
<script>
  const s = document.querySelector('#kategoria');
  s.addEventListener('change', _=> {
    document.querySelector('#wybor').textContent = s.options[s.selectedIndex].value;
    document.querySelector('#wybor').textContent += ' ' + s.options[s.selectedIndex].text;
  }); 
</script>

 

komentarz 1 kwietnia przez Infos Użytkownik (570 p.)

@Fiji404,  dzięki 

komentarz 2 kwietnia przez Fiji404 Użytkownik (860 p.)

@VBService, Tak wiem, że to tak działa, ale value użyte tutaj miało inne zadanie. Jeśli opcje byłyby długie np. maszyny rolnicze i części, a chcielibyśmy sprawdzić poszczególne opcje jakie zostały wybrane i coś z tym zrobić, to w kodzie lepiej nie odwoływać się do tak długiej nazwy tylko mieć na to "alias" np. agricultural dzięki value

komentarz 2 kwietnia przez VBService Ekspert (252,520 p.)

IMO teraz Twoja odpowiedź z tym komentarzem jest pełna i zrozumiała, bo bez tego komentarza, Twoja odpowiedź

Jeśli chcesz sprawdzić jaką opcję wybrałeś, to najpierw każdemu <option> warto nadać z osobna własny atrybut "value", gdzie wartość z tego atrybutu będzie reprezenotować wartość jaka została wybrana dla tego select'a

dla Mnie IMO to zabrzmiało jak stwiedzenie faktu, że inaczej sie nie da. smiley

komentarz 2 kwietnia przez VBService Ekspert (252,520 p.)
edycja 2 kwietnia przez VBService

@Fiji404, Druga sprawa

to w kodzie lepiej nie odwoływać się do tak długiej nazwy tylko mieć na to "alias"

i tak, i nie, jak to zwykle bywa w programowaniu wszystko zależy od kontekstu

sprawdź:

<style>
  output { display: block; margin-top: 1rem; }
  output span { font-weight: 700; }
</style>
<select>
  <option selected disabled>Wybierz lorem</option>
</select>
<output></output>
const db = [
  'Lorem 1 ipsum dolor sit amet, consectetur adipiscing',
  'Lorem 2 ipsum dolor sit amet, consectetur adipiscing',
  'Lorem 3 ipsum dolor sit amet, consectetur adipiscing',
  'Lorem 4 ipsum dolor sit amet, consectetur adipiscing'
];

const select_ = document.querySelector('select'),
      output_ = document.querySelector('output');

window.onload = _=> {
  const options = db.map((v) => `<option>${v}</option>`).join('');
  select_.insertAdjacentHTML('beforeend', options);
};

select_.onchange = _=> {
  if (select_.value && db.includes(select_.value))
    output_.innerHTML = `<span>id ${db.indexOf(select_.value)}:</span> ${select_.value}`;
};

w tym przypadku gdy wykorzystamy tablicę, mamy możliwość tworzenia select-a z poziomu kodu (bez wpisywania ręcznie kodu html) i wykorzystać mechanizmy wbudowane w obiekt Array do jej przeszukiwania nawet gdy wskazany przez użytkownika ciąg znaków jest "długi". smiley

0 głosów
odpowiedź 1 kwietnia przez VBService Ekspert (252,520 p.)

bo wpadłem na pomysł sortowania

w JavaScript istnieje wbudowana metoda sortowania dla tablic, która jest dostępna dla każdego obiektu tablicy, chodzi o metodę sort().

const tablica = [ 'b', 3, 1, 4, 1, 'a', 9, 2, 6, '+' ];
tablica.sort(); // Sortuje elementy jako ciągi znaków
console.log(tablica); // Wyświetli: ["+", 1, 1, 2, 3, 4, 6, 9, "a", "b"];
const tablica = [ 3, 1, 4, 1, 5, 9, 2, 6 ];
tablica.sort((a, b) => a - b); // Sortuje liczby rosnąco
console.log(tablica); // Wyświetli: [1, 1, 2, 3, 4, 5, 6, 9];
const tablica = [ 3, 1, 4, 1, 5, 9, 2, 6 ];
tablica.sort((a, b) => b - a); // Sortuje liczby malejąco
console.log(tablica); // Wyświetli: [9, 6, 5, 4, 3, 2, 1, 1];

 

komentarz 1 kwietnia przez Infos Użytkownik (570 p.)
Oczywiście każdemu dziękuję i metoda sort mi się nie przyda j jeszcze raz dziękuję kazdemu
pytanie zadane 1 kwietnia w JavaScript przez Infos Użytkownik (570 p.) Pytanie o Elektronika.push();

Podobne pytania

+1 głos
2 odpowiedzi 526 wizyt
pytanie zadane 1 października 2021 w JavaScript przez Doge Gaduła (3,370 p.)
0 głosów
3 odpowiedzi 2,828 wizyt
0 głosów
2 odpowiedzi 351 wizyt
pytanie zadane 12 listopada 2022 w JavaScript przez xTMx3 Obywatel (1,560 p.)

92,525 zapytań

141,357 odpowiedzi

319,384 komentarzy

61,914 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...