Wartość string, jako obiekt w pętli

Question

Witam! 
Mam pewien problem. Posiadam w kodzie listę wyboru "multiple". Aby przeczytać z niej wartości używam pętli: 

for (let i = 1; i < wybierzPrzeciwnika1.options.length; i++) { 
        if (wybierzPrzeciwnika1.options[i].selected) {
            debugInfo(wybierzPrzeciwnika1.options[i].value);
        } 
    } 

debugInfo to nic innego, jak console.log z kilkoma "usprawnieniami", po prostu moja funkcja, którą mogę wyłączyć ustawiając jedną wartość na false. Po prostu pętla nic jeszcze nie robi konkretnego, ale nie w tym rzecz.
"wybierzPrzeciwnika1" to nazwa jednego z selectów, jest ich 6, z odpowiednią liczbą. Przy innych typach inputów robiłem coś w tym stylu: 
 

let div = "postacStaty" + numerPostaci;
document.getElementById(div).innerHTML = staty;

W ten sposób odpowiednia nazwa mi się sama generowała i wszystko działało, ale nie przy tej pętli. Robiłem oczywiście to: 

let selectName = "wybierzPrzeciwnika" + numerPostaciAtakujacej;
    for (let i = 1; i < selectName.options.length; i++) { 
        if (selectName.options[i].selected) {
            debugInfo(selectName.options[i].value);
        } 
    }

lecz konsola mówi jasno:

Co też sprawdziłem

Czy jest jakiś względnie prosty sposób, by tego stringa zmienić w obiekt? Uprzedzając - szukałem, lecz trafiam na rozwiązania typu JSON.parse(), niestety, nie mam o tym zielonego pojęcia. Utknąłem ostatnie dwa dni na tym zagadnieniu i nie wiem, jak to przeskoczyć, by miało ręce i nogi. Z góry dziękuję za wszelką pomoc!

Comments

Jak wygląda kod HTML elementu <select>, po którego opcjach chcesz iterować?

---

<select> generowany jest przez javascript, tutaj jest odpowiednia funkcja: 

function kogoAtakuje(numerPostaci) {
    let div = "kogoAtakuje" + numerPostaci;
    let napisHTML = '<select id="wybierzPrzeciwnika' + numerPostaci + '" multiple>'

    for (let i in postacie) {
        for (let k in postacTab) {
            if (postacTab[k].imie == postacie[i].imie) {
                napisHTML += '<option value="' + k + '"> ' + postacie[i].imie + '</option>';
            }
        }
    }

    napisHTML += '</select>';
    document.getElementById(div).innerHTML = napisHTML;
} 

postacTab to tablica, zawierająca obiekty (postacie), które zostały wybrane, natomiast pętla[i] leci przez wszystkie dostępne. Opcje w select są dynamiczne, mogą wyglądać np. tak:

Tak jak pisałem, można "pojedynkować" do 6 postaci, więc muszę mieć możliwość dojścia do konkretnego selecta. Wygląda to mniej więcej tak:

Po wciśnięciu przycisku "Atak" skrypt ma przeczytać pole radio przy danej postaci (to jest i działa), oraz pole select, która postać jest atakowana. Multiple, bo może to być atak obszarowy. Problem, jak pisałem, że nie jestem w tej chwili na podstawie zmiennych/tablic itd. przeczytać wartości z konkretnego selecta, który chcę.  Teoretycznie mogę zrobić

if (numerPostaciAtakujacej == 1) {
        for (let i = 1; i < wybierzPrzeciwnika1.options.length; i++) { 
            if (wybierzPrzeciwnika1.options[i].selected) {
                //dalszy kod
            } 
        } 
    }

    if (numerPostaciAtakujacej == 2) {
        for (let i = 1; i < wybierzPrzeciwnika2.options.length; i++) { 
            if (wybierzPrzeciwnika2.options[i].selected) {
                //dalszy kod
            } 
        } 
    }

    //itd....

.. ale to nie chyba o to chodzi w programowaniu, aby powielać kod? Wszystko, co potrzebuję, to mieć możliwość przeczytania wartości konkretnego selecta, na podstawie zmiennej, lecz generując nazwę selecta na podstatwie "wybierzPrzeciwnika" + numerPostaci zmienna jest napisem i nie zadziała w tej pętli. Szukam, jak ten problem obejść

Answer 1

Tak jak napisał Ci @Tomek Sochacki - błąd wskazuje Ci gdzie się pomyliłeś.

Metoda document.getElementById( .. ) jako parametr przyjmuje string, którego wartością jest identyfikator elementu w DOM.

W tym miejscu tworzysz zmienną div, do której przypisujesz string z identyfikatorem elementu, a później pobierasz element (obiekt) na podstawie tego id (i to jest poprawne):

let div = "postacStaty" + numerPostaci;
document.getElementById(div).innerHTML = staty;

Ale poniżej tworzysz stringa - w analogicznej formie co w poprzednim kodzie miała wartość przypisana do zmiennej div - po czym próbujesz odczytać property options.length z tego stringa (co jest niepoprawne). Zapomniałeś natomiast pobrać obiekt reprezentujący ten element w DOM - dopiero on ma property options.length (przy założeniu, że to <select>):

let selectName = "wybierzPrzeciwnika" + numerPostaciAtakujacej;
// zmienna selectName - jako string - nie posiada property options ani tym bardziej options.length
    for (let i = 1; i < selectName.options.length; i++) { 

Jak to można poprawić:

let selectId = "wybierzPrzeciwnika" + numerPostaciAtakujacej;
const selectElement = document.getElementById(selectId);

    for (let i = 1; i < selectElement.options.length; i++) { 

Dodatkowo zwróć uwagę, że pobierasz element po atrybucie id, a nie name, więc bardziej logiczne (a przede wszystkim bardziej czytelne) jest nazwanie zmiennej w taki sposób, aby mówiła, że odnosi się do id a nie name.

Comments

O o o właśnie! :) Wielkie dzięki za pomoc, zwłaszcza tobie @ScriptyChris. Nie wiedziałem właśnie jak odnieść tą nazwę, tego "stringa", jako obiekt HTML, a wystarczy taka prosta rzecz.. Masz rację co do nazwy zmiennej, zmieniłem w kodzie.

Wielkie dzięki jeszcze raz! Problem rozwiązany

Answer 2

Przeciez selectName jest u Ciebie stringiem, nie obiektem z polem options. Błąd jest poprawny, string nie posiada takiej właściwości.