How can I make javascript apply to list of elements?











up vote
1
down vote

favorite












I want to flip cards in the browser. The elements are rendered with a Django template for loop. I'm able to flip the first card, but not the rest. I want them to flip individually.



Here's html:



   {% for element in elements %}
<div class="outer">
<div class="inner">

<div class="card-back">
<span>{{ content }}</span>
</div>

<div class="card-front">
<span>{{ content }}</span>
</div>

</div>
</div>
{% endear %}


Here's javascript:



# works for the first element
var card = document.querySelector('.inner');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});

# this function seems to break things
function() {
var cards = document.querySelectorAll(".inner");
for ( var i = 0, len = cards.length; i < len; i++ ) {
var card = cards[i];
clickListener(card);
}
});









share|improve this question


















  • 1




    What does clickListener() do and what errors are thrown in browser console? Those error messages are important clues. Note that function () { }) is invalid syntax and would not ever get called
    – charlietfl
    Nov 10 at 21:20

















up vote
1
down vote

favorite












I want to flip cards in the browser. The elements are rendered with a Django template for loop. I'm able to flip the first card, but not the rest. I want them to flip individually.



Here's html:



   {% for element in elements %}
<div class="outer">
<div class="inner">

<div class="card-back">
<span>{{ content }}</span>
</div>

<div class="card-front">
<span>{{ content }}</span>
</div>

</div>
</div>
{% endear %}


Here's javascript:



# works for the first element
var card = document.querySelector('.inner');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});

# this function seems to break things
function() {
var cards = document.querySelectorAll(".inner");
for ( var i = 0, len = cards.length; i < len; i++ ) {
var card = cards[i];
clickListener(card);
}
});









share|improve this question


















  • 1




    What does clickListener() do and what errors are thrown in browser console? Those error messages are important clues. Note that function () { }) is invalid syntax and would not ever get called
    – charlietfl
    Nov 10 at 21:20















up vote
1
down vote

favorite









up vote
1
down vote

favorite











I want to flip cards in the browser. The elements are rendered with a Django template for loop. I'm able to flip the first card, but not the rest. I want them to flip individually.



Here's html:



   {% for element in elements %}
<div class="outer">
<div class="inner">

<div class="card-back">
<span>{{ content }}</span>
</div>

<div class="card-front">
<span>{{ content }}</span>
</div>

</div>
</div>
{% endear %}


Here's javascript:



# works for the first element
var card = document.querySelector('.inner');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});

# this function seems to break things
function() {
var cards = document.querySelectorAll(".inner");
for ( var i = 0, len = cards.length; i < len; i++ ) {
var card = cards[i];
clickListener(card);
}
});









share|improve this question













I want to flip cards in the browser. The elements are rendered with a Django template for loop. I'm able to flip the first card, but not the rest. I want them to flip individually.



Here's html:



   {% for element in elements %}
<div class="outer">
<div class="inner">

<div class="card-back">
<span>{{ content }}</span>
</div>

<div class="card-front">
<span>{{ content }}</span>
</div>

</div>
</div>
{% endear %}


Here's javascript:



# works for the first element
var card = document.querySelector('.inner');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});

# this function seems to break things
function() {
var cards = document.querySelectorAll(".inner");
for ( var i = 0, len = cards.length; i < len; i++ ) {
var card = cards[i];
clickListener(card);
}
});






javascript html django






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 10 at 21:17









Whodini

31612




31612








  • 1




    What does clickListener() do and what errors are thrown in browser console? Those error messages are important clues. Note that function () { }) is invalid syntax and would not ever get called
    – charlietfl
    Nov 10 at 21:20
















  • 1




    What does clickListener() do and what errors are thrown in browser console? Those error messages are important clues. Note that function () { }) is invalid syntax and would not ever get called
    – charlietfl
    Nov 10 at 21:20










1




1




What does clickListener() do and what errors are thrown in browser console? Those error messages are important clues. Note that function () { }) is invalid syntax and would not ever get called
– charlietfl
Nov 10 at 21:20






What does clickListener() do and what errors are thrown in browser console? Those error messages are important clues. Note that function () { }) is invalid syntax and would not ever get called
– charlietfl
Nov 10 at 21:20














1 Answer
1






active

oldest

votes

















up vote
1
down vote



accepted










According to Mozilla documentation, document.querySelector returns an Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.



This is why it works only for the first element.



If you want to apply this on all elements, you can use jQuery and register the event when the page is fully loaded.



<head>

<script src="https://code.jquery.com/jquery-3.3.1.js">

<script>

$(document).ready(function()
{
$(".inner").click(function(event)
{
var card = event.target;
card.classList.toggle('is-flipped');
});
});

</script>

</head>


Please know that you don't need the function with the foor loop, as jQuery will automatically apply the click event whenever a new element is added.






share|improve this answer



















  • 1




    Thanks for answering Amine. I'm tinkering with it now...
    – Whodini
    Nov 10 at 22:02










  • I have updated my answer
    – Amine Messaoudi
    Nov 10 at 22:04










  • Still not working. I think your code works all except the event.target part. Doesn't seem to be calling anything. When I replace that with var card = document.querySelector('.inner'); clicking any card will flip the first one. So it's close...
    – Whodini
    Nov 10 at 22:16










  • When you run my code, is there any warnings/errors in console ? Because I tested it in my computet and its working fine
    – Amine Messaoudi
    Nov 10 at 22:19












  • Ah ok I got it. Instead of this: card.classList.toggle('is-flipped'); I used this.classList.toggle('is-flipped'); and it worked. Thanks Amine.
    – Whodini
    Nov 10 at 22:20













Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243496%2fhow-can-i-make-javascript-apply-to-list-of-elements%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
1
down vote



accepted










According to Mozilla documentation, document.querySelector returns an Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.



This is why it works only for the first element.



If you want to apply this on all elements, you can use jQuery and register the event when the page is fully loaded.



<head>

<script src="https://code.jquery.com/jquery-3.3.1.js">

<script>

$(document).ready(function()
{
$(".inner").click(function(event)
{
var card = event.target;
card.classList.toggle('is-flipped');
});
});

</script>

</head>


Please know that you don't need the function with the foor loop, as jQuery will automatically apply the click event whenever a new element is added.






share|improve this answer



















  • 1




    Thanks for answering Amine. I'm tinkering with it now...
    – Whodini
    Nov 10 at 22:02










  • I have updated my answer
    – Amine Messaoudi
    Nov 10 at 22:04










  • Still not working. I think your code works all except the event.target part. Doesn't seem to be calling anything. When I replace that with var card = document.querySelector('.inner'); clicking any card will flip the first one. So it's close...
    – Whodini
    Nov 10 at 22:16










  • When you run my code, is there any warnings/errors in console ? Because I tested it in my computet and its working fine
    – Amine Messaoudi
    Nov 10 at 22:19












  • Ah ok I got it. Instead of this: card.classList.toggle('is-flipped'); I used this.classList.toggle('is-flipped'); and it worked. Thanks Amine.
    – Whodini
    Nov 10 at 22:20

















up vote
1
down vote



accepted










According to Mozilla documentation, document.querySelector returns an Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.



This is why it works only for the first element.



If you want to apply this on all elements, you can use jQuery and register the event when the page is fully loaded.



<head>

<script src="https://code.jquery.com/jquery-3.3.1.js">

<script>

$(document).ready(function()
{
$(".inner").click(function(event)
{
var card = event.target;
card.classList.toggle('is-flipped');
});
});

</script>

</head>


Please know that you don't need the function with the foor loop, as jQuery will automatically apply the click event whenever a new element is added.






share|improve this answer



















  • 1




    Thanks for answering Amine. I'm tinkering with it now...
    – Whodini
    Nov 10 at 22:02










  • I have updated my answer
    – Amine Messaoudi
    Nov 10 at 22:04










  • Still not working. I think your code works all except the event.target part. Doesn't seem to be calling anything. When I replace that with var card = document.querySelector('.inner'); clicking any card will flip the first one. So it's close...
    – Whodini
    Nov 10 at 22:16










  • When you run my code, is there any warnings/errors in console ? Because I tested it in my computet and its working fine
    – Amine Messaoudi
    Nov 10 at 22:19












  • Ah ok I got it. Instead of this: card.classList.toggle('is-flipped'); I used this.classList.toggle('is-flipped'); and it worked. Thanks Amine.
    – Whodini
    Nov 10 at 22:20















up vote
1
down vote



accepted







up vote
1
down vote



accepted






According to Mozilla documentation, document.querySelector returns an Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.



This is why it works only for the first element.



If you want to apply this on all elements, you can use jQuery and register the event when the page is fully loaded.



<head>

<script src="https://code.jquery.com/jquery-3.3.1.js">

<script>

$(document).ready(function()
{
$(".inner").click(function(event)
{
var card = event.target;
card.classList.toggle('is-flipped');
});
});

</script>

</head>


Please know that you don't need the function with the foor loop, as jQuery will automatically apply the click event whenever a new element is added.






share|improve this answer














According to Mozilla documentation, document.querySelector returns an Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.



This is why it works only for the first element.



If you want to apply this on all elements, you can use jQuery and register the event when the page is fully loaded.



<head>

<script src="https://code.jquery.com/jquery-3.3.1.js">

<script>

$(document).ready(function()
{
$(".inner").click(function(event)
{
var card = event.target;
card.classList.toggle('is-flipped');
});
});

</script>

</head>


Please know that you don't need the function with the foor loop, as jQuery will automatically apply the click event whenever a new element is added.







share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 10 at 22:04

























answered Nov 10 at 21:44









Amine Messaoudi

450314




450314








  • 1




    Thanks for answering Amine. I'm tinkering with it now...
    – Whodini
    Nov 10 at 22:02










  • I have updated my answer
    – Amine Messaoudi
    Nov 10 at 22:04










  • Still not working. I think your code works all except the event.target part. Doesn't seem to be calling anything. When I replace that with var card = document.querySelector('.inner'); clicking any card will flip the first one. So it's close...
    – Whodini
    Nov 10 at 22:16










  • When you run my code, is there any warnings/errors in console ? Because I tested it in my computet and its working fine
    – Amine Messaoudi
    Nov 10 at 22:19












  • Ah ok I got it. Instead of this: card.classList.toggle('is-flipped'); I used this.classList.toggle('is-flipped'); and it worked. Thanks Amine.
    – Whodini
    Nov 10 at 22:20
















  • 1




    Thanks for answering Amine. I'm tinkering with it now...
    – Whodini
    Nov 10 at 22:02










  • I have updated my answer
    – Amine Messaoudi
    Nov 10 at 22:04










  • Still not working. I think your code works all except the event.target part. Doesn't seem to be calling anything. When I replace that with var card = document.querySelector('.inner'); clicking any card will flip the first one. So it's close...
    – Whodini
    Nov 10 at 22:16










  • When you run my code, is there any warnings/errors in console ? Because I tested it in my computet and its working fine
    – Amine Messaoudi
    Nov 10 at 22:19












  • Ah ok I got it. Instead of this: card.classList.toggle('is-flipped'); I used this.classList.toggle('is-flipped'); and it worked. Thanks Amine.
    – Whodini
    Nov 10 at 22:20










1




1




Thanks for answering Amine. I'm tinkering with it now...
– Whodini
Nov 10 at 22:02




Thanks for answering Amine. I'm tinkering with it now...
– Whodini
Nov 10 at 22:02












I have updated my answer
– Amine Messaoudi
Nov 10 at 22:04




I have updated my answer
– Amine Messaoudi
Nov 10 at 22:04












Still not working. I think your code works all except the event.target part. Doesn't seem to be calling anything. When I replace that with var card = document.querySelector('.inner'); clicking any card will flip the first one. So it's close...
– Whodini
Nov 10 at 22:16




Still not working. I think your code works all except the event.target part. Doesn't seem to be calling anything. When I replace that with var card = document.querySelector('.inner'); clicking any card will flip the first one. So it's close...
– Whodini
Nov 10 at 22:16












When you run my code, is there any warnings/errors in console ? Because I tested it in my computet and its working fine
– Amine Messaoudi
Nov 10 at 22:19






When you run my code, is there any warnings/errors in console ? Because I tested it in my computet and its working fine
– Amine Messaoudi
Nov 10 at 22:19














Ah ok I got it. Instead of this: card.classList.toggle('is-flipped'); I used this.classList.toggle('is-flipped'); and it worked. Thanks Amine.
– Whodini
Nov 10 at 22:20






Ah ok I got it. Instead of this: card.classList.toggle('is-flipped'); I used this.classList.toggle('is-flipped'); and it worked. Thanks Amine.
– Whodini
Nov 10 at 22:20




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243496%2fhow-can-i-make-javascript-apply-to-list-of-elements%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Guess what letter conforming each word

Port of Spain

Run scheduled task as local user group (not BUILTIN)