• 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

Aruba Cloud - Virtual Private Server VPS
+1 głos
426 wizyt
pytanie zadane 1 kwietnia 2024 w JavaScript przez niezalogowany
otagowane ponownie 1 kwietnia 2024

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 2024 przez VBService Ekspert (256,600 p.)
edycja 1 kwietnia 2024 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 2024 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 2024 przez VBService Ekspert (256,600 p.)
edycja 1 kwietnia 2024 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 2024 przez niezalogowany

@Fiji404,  dzięki 

komentarz 2 kwietnia 2024 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 2024 przez VBService Ekspert (256,600 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 2024 przez VBService Ekspert (256,600 p.)
edycja 2 kwietnia 2024 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 2024 przez VBService Ekspert (256,600 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 2024 przez niezalogowany
Oczywiście każdemu dziękuję i metoda sort mi się nie przyda j jeszcze raz dziękuję kazdemu
pytanie zadane 1 kwietnia 2024 w JavaScript przez niezalogowany Pytanie o Elektronika.push();

Podobne pytania

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

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,654 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...