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))");
});
}