Am nevoie sa scot afara o variabila array dintr-o functie interna la apasarea pe un checkbox

<div class="div-topics">
  <br><input type="checkbox" id="Checkbox1000034" value="10000340" onchange="updateArray(this)">group a</input>
</div>
arrchk = [];

function updateArray(checkbox) {
  if (checkbox.checked) {
    for (let i = 0; i < 5; i++) {
      arrchk.push(parseInt(checkbox.value) + parseInt(i));
    }
  }
  console.log(arrchk); //here shows: [10000340, 10000341, 10000342, 10000343, 10000344] -aici arata bine, e ceea ce e de folos
}
console.log(arrchk); //aici arata diferit si nu e intre paranteze drepte rezultatul
//0:10000340
//1:10000341
//2:10000342
//3:10000342
//4:10000342
//[[Prototype]]; Array(0)
  1. Niciodata nu declara o variabila fara const/let/var altfel dai de ciudatenii din JS.
  2. La al doilea console.log esti in afara callback-ului la event, o sa ruleze independent de updateArray, de unde il chemi ? Ce vrei sa faci cu arrchk ? O sa iti scrie doar [] si dupa nu mai ruleaza niciodata. Cred ca vrei sa faci altceva dar ai pus doar o parte din cod.
  3. Nu numi o variabila arrchk, numeste variabila descriptiv, e.g. checkboxArray.
  4. Closures
    Closures Explained in 100 Seconds // Tricky JavaScript Interview Prep - YouTube

Poti folosi CodeSandbox: Code, Review and Deploy in Record Time sau StackBlitz | Instant Dev Environments | Click. Code. Done. ca sa pui cod usor de reprodus pe forumuri/discord etc.

1 Like
console.log(arrchk); //aici arata diferit si nu e intre paranteze drepte rezultatul
//0:10000340
//1:10000341
//2:10000342
//3:10000342
//4:10000342
//[[Prototype]]; Array(0)

Ba este între paranteze (adică un array). Numai că l-ai copiat din consolă după ce ai dat click pe array. Așa le printează consola.

Problema este din alta parte. Ceva la care doar tu ai access. Exemplul tau functioneaza corect pentru noi daca il folosesti cum trebuie.

<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    arrchk = [];

    function updateArray(checkbox) {
      if (checkbox.checked) {
        for (let i = 0; i < 5; i++) {
          arrchk.push(parseInt(checkbox.value) + parseInt(i));
        }
      }
      console.log(arrchk);
    }
    console.log(arrchk); // Se executa inainte ca updateArray() sa ruleze. deci output: []
  </script>
</head>
<body>
    <input type="checkbox" id="Checkbox1000034" value="10000340" onchange="updateArray(this)">group a</input>
    <br/>
    <input type="button" value="log" onclick="console.log(arrchk)"></input>
</body>
</html>

firefox_kekt4zOLad

1 Like

Multumesc frumos pentru raspunsuri! Acum invat din mers.
István: 1. Am incercat cu toate pentru ca nu inteleg inca in toate situatiile ce influenta au. 2. La callback inca nu am ajuns :slight_smile: insa ma uit mai in detaliu. arrchk e un array unidimensional de unde vreau sa iau fiecare element de acolo si sa-l compar cu cate un element din array-urile unidimensionale dintr-un array multidimensional. 3.ok. 4. Closures asa in mare vad ca e ce mi-ar trebui insa nu inteleg inca foarte bine.
Pavelescu: as vrea sa pot sa iau acele int-uri (10000340, 10000341, etc. si sa le compar cu alte numere identice pe care le iau din alt alt array.
iSLC: am incercat codul, e foarte faina chestia cu video inregistrat, acolo la linia cu <input type=“button” ar putea sa pun la onclick functia updateArray(checkbox) ca sa mi-o execute? Am incercat si cu checkbox in parametri si fara insa nu a mers.
Sper ca am explicat mai mult ca pana acum. In ca caz ca ma mai puteti sfatui multumesc frumos, incerc sa pun codul complet, doar sa-l aranjez un pic.

prima serie

a doua serie

Azi

In HTML nu poti sa te referi la un element ca o variabla. Poti, dar nu cum iti imaginezi tu acum. Intai trebuie sa gasesti o trasatura unica sau combinatie de trasaturi unice care identifica elementul tau in DOM. Un id, o clasa, un tag, un nume etc. sau o combinatie intre ele. Si folosesti cateva functionalitati JS pentru a identifica elementul care te intereseaza in DOM, folosind acele trasaturi.

In cazul de fata, elementul care te intereaseaza are o trasatura care este destul de unica in document. Are un ID Checkbox1000034. Si poti sa folosesti ceva gen document.getElementById sa obtii instanta elementului pe care poti sa o folosesti ca argument in functia updateArray.

<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    arrchk = [];

    function updateArray(checkbox) {
      if (checkbox.checked) {
        for (let i = 0; i < 5; i++) {
          arrchk.push(parseInt(checkbox.value) + parseInt(i));
        }
      }
      console.log(arrchk);
    }
    console.log(arrchk); // Se executa inainte ca updateArray() sa ruleze. deci output: []
  </script>
</head>
<body>
    <input type="checkbox" id="Checkbox1000034" value="10000340"">group a</input>
    <br/>
    <input type="button" value="log" onclick="updateArray(document.getElementById('Checkbox1000034'))"></input>
</body>
</html>

Sunt si alte moduri de identificare document.getElementsByClassName(), document.getElementsByName, document.getElementsByTagName etc.

Atentie: Daca sunt mai multe elemente care se potrivesc cu trasaturile pe care le cauti. Atunci primesti o colectie (array) cu ele, nu doar un singur element. Pe urma poti sa rafinezi cautarea in colectie folosind alte trasaturi pana obtii doar elementele care te intereseaza.