Zadanie z 5 odcinka kursu JS

Question

Witam,
Jestem nowy w JavaScript i zmagam się z zadaniem z 5 odcinka kursu JS, a mianowicie uproszczenie zapisu tego kodu

var c0 = document.getElementById('c0');
var c1 = document.getElementById('c1');
var c2 = document.getElementById('c2');
var c3 = document.getElementById('c3');

var c4 = document.getElementById('c4');
var c5 = document.getElementById('c5');
var c6 = document.getElementById('c6');
var c7 = document.getElementById('c7');

var c8 = document.getElementById('c8');
var c9 = document.getElementById('c9');
var c10 = document.getElementById('c10');
var c11 = document.getElementById('c11');

c0.addEventListener("click", function() { revealCard(0); });
c1.addEventListener("click", function() { revealCard(1); });
c2.addEventListener("click", function() { revealCard(2); });
c3.addEventListener("click", function() { revealCard(3); });

c4.addEventListener("click", function() { revealCard(4); });
c5.addEventListener("click", function() { revealCard(5); });
c6.addEventListener("click", function() { revealCard(6); });
c7.addEventListener("click", function() { revealCard(7); });

c8.addEventListener("click", function() { revealCard(8); });
c9.addEventListener("click", function() { revealCard(9); });
c10.addEventListener("click", function() { revealCard(10); });
c11.addEventListener("click", function() { revealCard(11); });

Doszedłem do tego że można to (chyba) zrobić w pętli for i wymodziłem taki kod

function start()
{
    var c = "";

    for(i=0; i<11; i++)
    {
    c=document.getElementById('c'+i);
   
 
 
    c.addEventListener("click", function(){ alert('card'+i); });

    }
}

Problem polega na tym że nie ważne na jaką kartę w Gwencie klikne, pojawi się alert z numerem "11".
W jaki sposób zrobić tak, żeby szufladka "c" miała przypisane różne  wartośc i żeby po kliknięciu kolejnych kart pokazywało kolejne numery.
Liczę na pomoc
Pozdrawiam

Comments

Jak chcesz się tego dobrze nauczyć to zmień kurs, bo ten to dramat.

---

@Jakub3kk, Polecam np.

Kurs Javascript dla superbohaterów

Answer 1

Można to zrobić bez pętli korzystając z faktu, że w javascript "występuje mechanizm" Event Delegation. 

  const container = document.querySelector('.container');
  container.addEventListener('click', card);

  function card(e) {
    // if (e.target && e.target.nodeName == 'DIV' && !e.target.matches('.container'))
    if (e.target && e.target.nodeName == 'DIV' && !e.target.classList.contains('container'))
      alert('card'+e.target.id.replace('c',''));
  }

 

dla takiego przykładu

<style>
  .container div {
    border: 1px solid white;
    padding: 0.2em;
    cursor: pointer;
    transition: border-color 0.25s;
  }  
  .container div:hover {
    border-color: black;
  }
</style>
<div class="container">
  <div id="c0">c0</div>
  <p>Lorem ipsum</p>
  <div id="c1">c1</div>
  <div id="c2">c2</div>
  <div id="c3">c3</div>
  <p>Lorem ipsum</p>
  <div id="c4">c4</div>
  <div id="c5">c5</div>
  <div id="c6">c6</div>
  <div id="c7">c7</div>
  <div id="c8">c8</div>
  <div id="c9">c9</div> 
  <div id="c10">c10</div>
  <p>Lorem ipsum</p>
  <div id="c11">c11</div>
  <div id="c12">c12</div>
  <div id="c13">c13</div>
  <div id="c14">c14</div>
  <div id="c15">c15</div>
  <div id="c16">c16</div>
  <div id="c17">c17</div>
  <div id="c18">c18</div>
  <div id="c19">c19</div>
  <div id="c20">c20</div>  
</div>
<script>
  const container = document.querySelector('.container');
  container.addEventListener('click', card);

  function card(e) {
    // if (e.target && e.target.nodeName == 'DIV' && !e.target.matches('.container'))
    if (e.target && e.target.nodeName == 'DIV' && !e.target.classList.contains('container'))
      alert('card'+e.target.id.replace('c',''));
  }
</script>

 

A Twój kod popraw np. tak

  function start()
  { 
    for (let i=0; i<11; i++)
    {
      const c = document.getElementById('c'+i);
      // c.onclick = (e) => { alert('card'+e.target.id); }
      // c.addEventListener("click", ({target}) => { alert('card'+target.id); });
      // c.addEventListener("click", function(e) { alert('card'+e.target.id.replace('c','')); });
      // c.addEventListener("click", function(e) { alert('card'+e.target.id); });
      c.addEventListener("click", (e) => { alert('card'+e.target.id.slice(1)); }); 
    }
  }

lub

  function start()
  { 
    // document.querySelectorAll('[id^="c"]').forEach(...);

    document.querySelectorAll('div[id^="c"]').forEach((c) => {
      c.addEventListener("click", (e) => { alert('card'+e.target.id.replace('c','')); });
    })
  }

nawet

  function start()
  { 
    document.querySelectorAll('div[id^="c"]').forEach((c) => {
      c.setAttribute("onclick", "alert('card'+this.id.slice(1))");
    });
  }