Prośba o pomoc tworzenie i odczytywanie wartości zmiennych w pętli

0

Dzień Dobry
Na wstępie chciałem się przywitać bo jestem nowym użytkownikiem. Niestety to moje początki z kodowaniem i to co chce zrobić może się wydać śmieszne. Pewnie powinno to się to robić w inny sposób, może nawet w innym języku, ale jeśli jest to możliwe do zrobienia w JS + html to proszę o pomoc. Szukałem w necie odpowiedzi, niestety bez skutku.

Otóż w htmlu mam przycisk i diva. Każde kliknięcie przycisku powoduje że treść diva zmienia się dodając kolejne np. 4 pola tekstowe. Nazwy pól generują się automatycznie na zasadzie np. an gdzie n to kolejny numer kliknięcia. Kolejne kolumny to np. bn, cn, dn. I mój problem jest następujący. Jak stworzyć funkcje która po kliknięciu kolejnego przycisku będzie zczytywała wartości tych pól tworząc automatycznie zmienne zawierające zczytane dane, bez zakładania wcześniej z góry przed uruchomieniem programu ilości tych pól(wierszy) .

Chodzi o to czy jest możliwe takie:
'''var an = document.getElementById("an")=value'''

Gdzie n to numer i zmienia się w pętli uzależnionej od liczby wierszy. Czy taka składnia jest możliwa?

0

jeśli 'an' to pole tekstowe, to można jak najbardziej, tylko zmień drugie '=' na '.'

0

Jest kropka w kodzie tak jak powinna być . Mój błąd we wpisie na forum.

Problem że pole to nie "an" tylko a1 a2 a3 a4 i tak dalej gdzie ich liczba nie jest ustalona na początku programu. W danej chwili może być 5 a równie dobrze 100. Chodzi o to aby funkcja zczytwala wszystkie dodane pola i tworzyła dla nich zmienne.

0

możesz na upartego zrobić coś takiego:

for(i = 0; i < max_i; i++) {
    var name = "a" + i;
    window[name] = document.getElementById(name).value;
}

ale może prościej będzie użyć zwykłej tablicy

var a = new Array();
for(i = 0; i < max_i; i++) {
    a[i] = document.getElementById(name).value;
}
0

Atrybut name dla pola tekstowego może być tablicą np.

<input type="text" name="a[]"/>
<input type="text" name="a[]"/>

itd.
Następnie w JS możesz to odczytać w ten sposób:

document.getElementsByTagName("form")[0].addEventListener("submit", (e) => {
  const data = new FormData(e.currentTarget);
  for (const value of data.values()) {
    console.log(value);
   }
});

Demo: https://jsfiddle.net/srmzxw7d/
Przeczytaj dokładnie https://developer.mozilla.org/en-US/docs/Web/API/FormData zanim zadasz kolejne pytanie.
Nie używaj var, przeczytaj https://kursjs.pl/kurs/super-podstawy/zmienne.php

0

Super. Wielkie dzięki za pomoc. Sposób z pętla na moje potrzeby wystarczający.

Mam teraz drugie pytanie. Chcę wczytać dane z pliku tekstowego aby potem je rozprowadzić po formularzu w odpowiednie rubryki (taka funkcja wczytywania kopii roboczej).
Znalazłem skrypt, który na moje potrzeby będzie super ale jest jeden problem, pewnie kuriozalny. Skrypt pobiera dane z pliku i wrzuca treść do diva, podczas gdy ja potrzebuję zapisać je do zmiennej, którą mógłbym wykorzystać w innych funkcjach w ramach tego programu.

    <head>
    <script>
      var openFile = function(event) {
        var input = event.target;

        var reader = new FileReader();
        reader.onload = function(){
          var text = reader.result;
          var node = document.getElementById('output'); //tutaj jest problem jak domniemam
          node.innerText = text;
          console.log(reader.result.substring(0, 200));
        };
        reader.readAsText(input.files[0]);
      };
    </script>
    </head>
    <body>
    <input type='file' accept='text/plain' onchange='openFile(event)'><br>
    <div id='output'>
    ...
    </div>
    </body>
    </html>

1 użytkowników online, w tym zalogowanych: 0, gości: 1