Call onClick Function On Multiple Elements

Question

I checked out some other posts on here but still couldn't get this issue to work. I have several elements in my html with the class cardContainer:

<div class="cardContainer">
<div id="card2" class="block" onclick="changeClass()">
</div>
</div>


<div class="cardContainer">
<div id="card3" class="block" onclick="changeClass()">
</div>
</div>

For each onClick event I would like to call this JS function:

<script type="text/javascript"> 
function changeClass(){
if(document.getElementById("card2").className == "block")
document.getElementById("card2").className += " rotated";

else
document.getElementById("card2").className = "block";
}
</script>

What I would like to do is include the card3 id, so it fires the same function on click. How would I be able to combine the ids "card2" and "card3" in the javascript so the function works?

I get that if I use getElementById, I can only get one and not multiple ids/classes, but I tried using getElementsByClassName for example without success. Also looked at other posts but couldn't get this to work based on the suggestions... I am new to Javascript and not quite sure on how to approach this.

Thanks for your help!

It's not clear what you are trying to do here. First of all, you are getting element by id card2 and you have no card2 in your markup. Make sure to include all your code and explain what you are trying to accomplish. — KingOfHypocrites
– KingOfHypocrites, Commented Jun 19, 2014 at 15:34
getElementById is meant to be used on ids, which are unique. With getElementsByClassName you will get no ids but classes. — Eder
– Eder, Commented Jun 19, 2014 at 15:41

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

Try this:

HTML

<div class="cardContainer">
    <div class="card block">Click Here</div>
    <div class="card block">Click Here</div>
    <div class="card block">Click Here</div>
</div>

JavaScript

var cards = document.querySelectorAll(".card");
for (var i = 0; i < cards.length; i++) {
    var card = cards[i];
    card.onclick = function () {
        if (this.classList.contains("block")) {
            this.classList.add("rotated");
            this.classList.remove("block");
        }
        else {
            this.classList.add("block");
            this.classList.remove("rotated");
        }
    };
}

Here is the Demo

Compatibility table for support of querySelector/querySelectorAll: Can I Use

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 19, 2014 at 15:45

super

2,3282 gold badges21 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eder · Accepted Answer · 2014-06-19 18:10:25Z

2

You can pass the id of the div being clicked on your changeClass function:

<div id="card3" class="block" onclick="changeClass(this.id)">

This way, it will be easier to handle your class switching process:

function changeClass(id) {
    var div = document.getElementById(id);
    switch (id) {
        case "card2": {
            if (div.className == "className") {
                div.className = "anotherClassName";
            }

            break;
        }
        case "card3": {
            if (div.className == "block") {
                div.className = "rotated";
            }

            break;
        }

        default: {
            // any other case
        }
    }
}

edited Jun 19, 2014 at 18:10

answered Jun 19, 2014 at 16:07

Eder

1,88418 silver badges35 bronze badges

3 Comments

user2163224 Over a year ago

Thanks, but where would I accommodate the else statement. What's the structure of adding other cases and the else statement? Thanks Eder!

Eder Over a year ago

Please find above the updated coded, showing how to add new cases. If you need a long description of the switch statement on javascript, Please take a look at the documentation: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

user2163224 Over a year ago

Thanks Eder, this is perfect! I used it like this:

function changeClass(id) { var div = document.getElementById(id); switch (id) { case "card2": { if(document.getElementById("card2").className == "block") document.getElementById("card2").className += " rotated";  else { document.getElementById("card2").className = "block"; } break; } case "card3": { if(document.getElementById("card3").className == "block") document.getElementById("card3").className += " rotated";  else { document.getElementById("card3").className = "block"; } break; } } }

Thank you!

Dayan Moreno Leon · Accepted Answer · 2014-06-19 15:38:00Z

0

use document.getElementsByClassName( doesn't work on ie<9 or FF<3) if you don't care about older browsers and if you do then i suggest you to use jquery, or just sizzle.js to use css selectors

answered Jun 19, 2014 at 15:38

Dayan Moreno Leon

5,4552 gold badges25 silver badges24 bronze badges

Comments

Trent · Accepted Answer · 2014-06-19 15:41:54Z

0

I think you're looking for something like this?. (assuming you're ok with using jQuery)

http://jsfiddle.net/LqpKt/

<div class="cardContainer">
  <div id="card1" class="block"></div>
</div>
<div class="cardContainer">
  <div id="card2" class="block"></div>
</div>
<div class="cardContainer">
  <div id="card3" class="block"></div>
</div>

<div id="output"></div>

$('.cardContainer').click(function(e){
    var name = $(this).find('.block').attr('id');
    $('#output').append($('<div>').html('clicked ' + name));
})

answered Jun 19, 2014 at 15:41

Trent

1,38111 silver badges12 bronze badges

1 Comment

user2163224 Over a year ago

Thanks Trent, but I am not sure what the output id would be for? ALl I want to do is have the function run on click of each element in plain javascript. Please advise. Thanks!

Collectives™ on Stack Overflow

Call onClick Function On Multiple Elements

4 Answers 4

HTML

JavaScript

Comments

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

HTML

JavaScript

Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related