JS niedziałająca pętla

Question

Chcę zrobić pętle , która sprawdzi mi 9 pozycji , ale nie wiem co robię źle z tą pętlą ?

 let pole= 0;
                        for(var e = 0; e<9; e++){
                            pole++;
                            pole = document.querySelectorAll('input[name="pole'+e+'"]').checked;

                     if(pole == true){
                        document.querySelector('input[name="pole'+e+'"]').disabled = true;
                    }
                }

 

Comments

będąc precyzyjnym chciałbym coś takiego zrobić i uzyskać ale js wywala błąd:

 for(var j=0; j<9; j++){
                      let pole+j = document.querySelector('input[name="pole'+j+'"]').checked;

                      if(pole+j == false){
                          document.querySelector('input[name="pole'+j+'"]').disabled = true;
                      }
                  }

 

---

Możesz jeszcze pokazać kod HTML?

Na jakiej podstawie określasz, że pętla ma wykonać się 9 razy? Stosowanie takich magicznych wartości nie jest dobrą praktyką.

Answer 1

Tworzenie dynamicznych zmiennych, to nie jest raczej dobra praktyka. Zastosuj array.push zamiast tego rozwiązania poniżej.

Kod z link'a dynamic variable.

var i = 'hello';

this["hello"+i] = 10;

console.log(hellohello); // 10

Napisz tak

for(var j=0;j<9;j++){
  if(document.querySelector(`input[name="pole${j}"]`).checked == false){
    document.querySelector(`input[name="pole${j}"]`).disabled = true;
  }
}

lub tak

for(var j=0;j<9;j++){
  let input_el = document.querySelector(`input[name="pole${j}"]`);
  if(input_el.checked == false){
    input_el.disabled = true;
  }
}

Comments

Czyli to będzie jakoś tak wyglądało ?Nie do końca chyba to rozumiem 

 for(var j=0; j<9; j++){
                      this[pole+j] = document.querySelector('input[name="pole'+j+'"]').checked;

                      if([pole+j] == false){
                          document.querySelector('input[name="pole'+j+'"]').disabled = true;
                      }
                  }

 

---

Te przykłady co podałeś coś nie robią

Uncaught TypeError: Cannot read property 'checked' of null

Ogólnie mój kod wygląda tak i staram się jakoś go zrestrukturyzować aby był lżejszy :

  let pole9 = document.querySelector('input[name="pole9"]').checked;
                 let pole8 = document.querySelector('input[name="pole8"]').checked;
                 let pole7 = document.querySelector('input[name="pole7"]').checked;
                 let pole6 = document.querySelector('input[name="pole6"]').checked;
                 let pole5 = document.querySelector('input[name="pole5"]').checked;
                 let pole4 = document.querySelector('input[name="pole4"]').checked;
                 let pole3 = document.querySelector('input[name="pole3"]').checked;
                 let pole2 = document.querySelector('input[name="pole2"]').checked;
                 let pole1 = document.querySelector('input[name="pole1"]').checked;
                         if(pole1 == false){
                             document.querySelector('input[name="pole1"]').disabled = true;
                         }if(pole2 == false){
                             document.querySelector('input[name="pole2"]').disabled = true;
                         }if(pole3 == false){
                             document.querySelector('input[name="pole3"]').disabled = true;
                         }if(pole4 == false){
                             document.querySelector('input[name="pole4"]').disabled = true;
                         }if(pole5 == false){
                             document.querySelector('input[name="pole5"]').disabled = true;
                         }if(pole6 == false){
                             document.querySelector('input[name="pole6"]').disabled = true;
                         }if(pole7 == false){
                             document.querySelector('input[name="pole7"]').disabled = true;
                         }if(pole8 == false){
                             document.querySelector('input[name="pole8"]').disabled = true;
                         }if(pole9 == false){
                             document.querySelector('input[name="pole9"]').disabled = true;
                         }

 

---

Nie stosuj tego sposobu, użyj te przykłady inne oprócz tego pierwszego.

this['pole'+j] = document.querySelector('input[name="pole'+j+'"]').checked;
// ...

if(this['pole'+j] == false){ // ...

Nie twórz dynamicznych zmiennych do tego. Wystarczy napisać tak

for(let i=0;i<document.querySelectorAll('input').length;i++) {
  if(!document.querySelectorAll('input')[i].checked) {
    document.querySelectorAll('input')[i].disabled = true;
  }
}

---

ncaught TypeError: Cannot read property 'checked' of null

Nie wiem co robię źle , ale nie rozumiem tych pętli w js .Jak bym mógł prosić o wytłumaczenie jak to działa będę wdzięczny

---

<form method="get" action="" id="form_checkboxes">
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
</form>

const checkboxes = document.querySelectorAll('form#form_checkboxes > input[type="checkbox"]');

for(let i=0;i<checkboxes.length;i++) {
  checkboxes[i].addEventListener('change', function() {
    if(checkboxes[i].checked) {
      checkboxes[i].disabled = true;
      console.log(1);
    }
  }, false);
}

nie rozumiem tych pętli w js

Proponuję poćwiczyć kodowanie w języku assembly x86.

Pętla pod spodem na niższym poziomie abstrakcji działa mniej więcej tak

global _main
extern _printf

	
	section .data

fmt:	db "%u", 0

	
	section .text

_main:
	mov ecx, 0
    
label_1:
	mov [var1], ecx	
	
    push ecx
    push fmt
	call _printf
	add esp, 8

	mov ecx, [var1]
	
	inc ecx
    cmp ecx, 5
	jbe label_1

    ret	

	section .bss

var1:	resb 1

Kompilacja i uruchomienie programu

nasm -fwin32 test_asm.asm && gcc test_asm.obj && a.exe

Rezultat kodu .asm

012345

Jest jakaś etykieta u mnie o nazwie "label_1", żeby program wiedział do jakiego miejsca ma skoczyć. Rejestr ecx jest ustawiony na wartość 0 - jest to licznik pętli, ile wykonał iteracji. Na początku ecx<-- 0, później w tej samej iteracji ecx<-- 1, ponieważ instrukcja inc ecx inkrementuje zmienną o jeden. Instrukcja cmp ustawia chyba flagi i jeszcze coś zależnie od rezultatu/wyniku operacji. "jbe etykieta" sprawdza, czy wynik operacji ustawiony przez instrukcję cmp wyżej jest równy lub mniejszy niż 5. Jeśli jest, to parser skacze do etykiety "label_1" i wykonuje te same instrukcje co wcześniej zgodnie z instrukcjami tam zawartymi. Przy drugiej iteracji wartość (licznika) rejestru ecx wynosi 1, dalej ecx<--2 i tak ciągle aż do 5. iteracji, gdzie parser wyjdzie z pętli i zakończy program.

---

Dzięki za pomoc już łapie .

---

Naciśnij F12 - zakładka "Console" i tam są wypisywane komunikaty.

---

nie rozumiem tych pętli w js

Proponuję poćwiczyć kodowanie w języku assembly x86.

Ekhm... tłumaczenie JavaScriptu lub innego wysokopoziomowego języka programowania w ten sposób to raczej przerost formy nad treścią. :)