Dodawanie i usuwanie z tablicy elementów

pytanie zadane 1 kwietnia w JavaScript przez Infos Użytkownik (650 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 (254,440 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

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 (254,440 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 (650 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 (254,440 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.

komentarz 2 kwietnia przez VBService Ekspert (254,440 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".

odpowiedź 1 kwietnia przez VBService Ekspert (254,440 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];