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

getElementsByName

VPS Starter Arubacloud
+1 głos
164 wizyt
pytanie zadane 22 sierpnia 2021 w JavaScript przez neo1020 Dyskutant (8,430 p.)

Cześć, mam takie pytanie bo nie mogę sobie z tym poradzić,

 

Mam 10 przycisków <button> każdy ma tag name="x" i value, różne w zależności od przycisku

Jak mogę pobrać do zmiennej wartość konkretnego przycisku,

 

var x = getElementsByName("").value
console.log(x); 



jak wartości mam 15 to jest undefined a ja potrzebuje konkretną wartość, z konkretnego przycisku

 

Z góry dziękuję

3 odpowiedzi

+3 głosów
odpowiedź 22 sierpnia 2021 przez Comandeer Guru (599,730 p.)

Musiałbyś pobrać wszystkie przyciski (document.getElementsByName), a następnie przelecieć to pętlą i pobrać wartość. Ogólnie raczej odchodzi się od tego typu rozwiązań na rzecz document.querySelectorAll.

Inna rzecz, że to pozwala pobrać wartość ze wszystkich przycisków. Brakuje nieco informacji, w jakiej sytuacji chcesz pobrać wartość z konkretnego. Bo jeśli w trakcie kliknięcia, to prawdopodobnie event.target Ci pomoże.

+3 głosów
odpowiedź 22 sierpnia 2021 przez SzkolnyAdmin Szeryf (86,280 p.)

Zakładam, że masz takie buttony:

<button name="x" value="przycisk01">Przycisk 01</button>
<button name="x" value="przycisk02">Przycisk 02</button>
<button name="x" value="przycisk03">Przycisk 03</button>
<button name="x" value="przycisk04">Przycisk 04</button>
<button name="x" value="przycisk05">Przycisk 05</button>
<button name="x" value="przycisk06">Przycisk 06</button>
<button name="x" value="przycisk07">Przycisk 07</button>
<button name="x" value="przycisk08">Przycisk 08</button>
<button name="x" value="przycisk09">Przycisk 09</button>
<button name="x" value="przycisk10">Przycisk 10</button>

Pod nimi daj skrypt:

let buttons = document.getElementsByName("x");

for(const button of buttons) {
	button.addEventListener("click", buttonsValue);
}

function buttonsValue() {
	alert(this.value);
}

Pokaże ci value klikniętego przycisku w alercie, ale to już sam możesz przerobić na zmienną.

0 głosów
odpowiedź 25 sierpnia 2021 przez neo1020 Dyskutant (8,430 p.)
edycja 25 sierpnia 2021 przez neo1020

Dzięki za podpowiedź, dzięki za przykład na pewno to wykorzystam, dopiero zacząłem się uczyć js, rozwiązałem to tak, zostawiam może komuś się przyda, pozdrawiam

 

  $( "#a1" ).click(function() {
  var text = $( this ).val();
  $( "#y" ).val( text );
  $( "#c" ).text( text );
  $( ".button-pojemnik" ).css({"background-color": "white"});
  $( "#a1" ).css({"background-color": "green"});
  $( "#c" ).css({"background-color": "green"});
});

$( "#a2" ).click(function() {
  var text = $( this ).val();
  $( "#y" ).val( text );
  $( "#c" ).text( text );
  $( ".button-pojemnik" ).css({"background-color": "white"});
  $( "#a2" ).css({"background-color": "green"});
  $( "#c" ).css({"background-color": "green"});
});

$( "#a3" ).click(function() {
  var text = $( this ).val();
  $( "#y" ).val( text );
  $( "#c" ).text( text );
  $( ".button-pojemnik" ).css({"background-color": "white"});
  $( "#a3" ).css({"background-color": "green"});
  $( "#c" ).css({"background-color": "green"});
});


$( "#a4" ).click(function() {
  var text = $( this ).val();
  $( "#y" ).val( text );
  $( "#c" ).text( text );
  $( ".button-pojemnik" ).css({"background-color": "white"});
  $( "#a4" ).css({"background-color": "green"});
  $( "#c" ).css({"background-color": "green"});
});

$( "#a5" ).click(function() {
  var text = $( this ).val();
  $( "#y" ).val( text );
  $( "#c" ).text( text );
  $( ".button-pojemnik" ).css({"background-color": "white"});
  $( "#a5" ).css({"background-color": "green"});
  $( "#c" ).css({"background-color": "green"});
});


$( "#a6" ).click(function() {
  var text = $( this ).val();
  $( "#y" ).val( text );
  $( "#c" ).text( text );
  $( ".button-pojemnik" ).css({"background-color": "white"});
  $( "#a6" ).css({"background-color": "green"});
  $( "#c" ).css({"background-color": "green"});
});

$( "#a7" ).click(function() {
  var text = $( this ).val();
  $( "#y" ).val( text );
  $( "#c" ).text( text );
  $( ".button-pojemnik" ).css({"background-color": "white"});
  $( "#a7" ).css({"background-color": "green"});
  $( "#c" ).css({"background-color": "green"});
});

$( "#a8" ).click(function() {
  var text = $( this ).val();
  $( "#y" ).val( text );
  $( "#c" ).text( text );
  $( ".button-pojemnik" ).css({"background-color": "white"});
  $( "#a8" ).css({"background-color": "green"});
  $( "#c" ).css({"background-color": "green"});
});

$( "#a9" ).click(function() {
  var text = $( this ).val();
  $( "#y" ).val( text );
  $( "#c" ).text( text );
  $( ".button-pojemnik" ).css({"background-color": "white"});
  $( "#a9" ).css({"background-color": "green"});
  $( "#c" ).css({"background-color": "green"});
});

$( "#a10" ).click(function() {
  var text = $( this ).val();
  $( "#y" ).val( text );
  $( "#c" ).text( text );
  $( ".button-pojemnik" ).css({"background-color": "white"});
  $( "#a10" ).css({"background-color": "green"});
  $( "#c" ).css({"background-color": "green"});
});

$( "#a11" ).click(function() {
  var text = $( this ).val();
  $( "#y" ).val( text );
  $( "#c" ).text( text );
  $( ".button-pojemnik" ).css({"background-color": "white"});
  $( "#a11" ).css({"background-color": "green"});
  $( "#c" ).css({"background-color": "green"});
});

$( "#a12" ).click(function() {
  var text = $( this ).val();
  $( "#y" ).val( text );
  $( "#c" ).text( text );
  $( ".button-pojemnik" ).css({"background-color": "white"});
  $( "#a12" ).css({"background-color": "green"});
  $( "#c" ).css({"background-color": "green"});
});

$( "#a13" ).click(function() {
  var text = $( this ).val();
  $( "#y" ).val( text );
  $( "#c" ).text( text );
  $( ".button-pojemnik" ).css({"background-color": "white"});
  $( "#a13" ).css({"background-color": "green"});
  $( "#c" ).css({"background-color": "green"});
});

$( "#a14" ).click(function() {
  var text = $( this ).val();
  $( "#y" ).val( text );
  $( "#c" ).text( text );
  $( ".button-pojemnik" ).css({"background-color": "white"});
  $( "#a14" ).css({"background-color": "green"});
  $( "#c" ).css({"background-color": "green"});
});

$( "#a15" ).click(function() {
  var text = $( this ).val();
  $( "#y" ).val( text );
  $( "#c" ).text( text );
  $( ".button-pojemnik" ).css({"background-color": "white"});
  $( "#a15" ).css({"background-color": "green"});
  $( "#c" ).css({"background-color": "green"});
});

$( "#a16" ).click(function() {
  var text = $( this ).val();
  $( "#y" ).val( text );
  $( "#c" ).text( text );
  $( ".button-pojemnik" ).css({"background-color": "white"});
  $( "#a16" ).css({"background-color": "green"});
  $( "#c" ).css({"background-color": "green"});
});

Przerobiony, great

 

let buttons = document.getElementsByName("btn-poj");
 
for(const button of buttons) {
    button.addEventListener("click", buttonsValue);
}
 
function buttonsValue() {
     document.getElementById("c").innerHTML = this.value;
}

 

1
komentarz 25 sierpnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Na marginesie: ten kod aż prosi się o owinięcie w pętle, np.:

const nums = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
// lub krócej
// const nums = new Array(16).fill(1).map((num, i) => num + i);

nums.forEach((num) => {
  const aIDSelector = `#a${num}`;

  $(aIDSelector).click(() => {
    const text = $( this ).val();
    $( "#y" ).val( text );
    $( "#c" ).text( text );
    $( ".button-pojemnik" ).css({"background-color": "white"});
    $( aIDSelector ).css({"background-color": "green"}); // lub $(this).css( .. )
    $( "#c" ).css({"background-color": "green"});
  });
});

 

komentarz 26 sierpnia 2021 przez neo1020 Dyskutant (8,430 p.)

Na początku wyskoczył mi błąd 

"Uncaught TypeError: Cannot read property 'toLowerCase' of undefined"

 

Zamieniłem

$(aIDSelector).click(() => {

na

  $(aIDSelector).click(function() {

i działa, dzięki. 

 

 

2
komentarz 26 sierpnia 2021 przez VBService Ekspert (251,210 p.)

Możesz też użyć takiego zapisu:

$( '[id^="a"]' ).each( function() {
  $( this ).click( function() {
    var text = $( this ).val();
    $( "#y" ).val( text );
    $( "#c" ).text( text );
    $( ".button-pojemnik" ).css({"background-color": "white"});
    $( this ).css({"background-color": "green"});
    $( "#c" ).css({"background-color": "green"});
  });
});

 

CSS Selector - ^

Podobne pytania

0 głosów
1 odpowiedź 91 wizyt
pytanie zadane 1 listopada 2019 w JavaScript przez Virius Początkujący (490 p.)
0 głosów
1 odpowiedź 78 wizyt
pytanie zadane 18 lutego w JavaScript przez Piotrek2713 Mądrala (5,320 p.)
0 głosów
0 odpowiedzi 48 wizyt
pytanie zadane 11 lutego w JavaScript przez Piotrek2713 Mądrala (5,320 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...