CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Johnny_1983
Johnny_1983

Reputation: 3

HTML | CSS | JS – Flip Cards got it working with 1, but it won’t work with 4

My objective is to have 4 boxes with the same effect in a grid. 2 at the top 2 at the bottom. With 1 it works fine, when I try to put the other 3 it doesn’t work. Here is jsfiddle 

function changeClass() {
    if(document.getElementById("block").className == "block")
        document.getElementById("block").className += " rotated";
    else
        document.getElementById("block").className = "block";
}

Here is an example of the working effect.

Upvotes: 0

Views: 67

Answers (2)

Pogrindis
Pogrindis

Reputation: 8121

Your HTML will need 3 unuique HTML ID elements like so:

<body>
    <div id="container">
        <div class="db">
            <div id="block" class="block" onclick="changeClass()">
                <div class="front side">
                    <h2>Box 1</h2>
                </div>
                <div class="back side">
                    <p>Box 1 Back Text</p>
                </div>
            </div>
            <div id="block1" class="block" onclick="changeClass()">
                <div class="front side">
                    <h2>Box 1</h2>
                </div>
                <div class="back side">
                    <p>Box 1 Back Text</p>
                </div>
            </div>
            <div id="block2" class="block" onclick="changeClass()">
                <div class="front side">
                    <h2>Box 1</h2>
                </div>
                <div class="back side">
                    <p>Box 1 Back Text</p>
                </div>
            </div>
        </div>
    </div>
</body>

Then your JS code will need to be modified to identify which elemet has been clicked.. Something like this

function changeClass(element) {
    if(element.className == "block")
        element.className += " rotated";
    else
        element.className = "block";
}

In your HTML onClick event you will pass in this like so

onclick="changeClass(this)"

As you can see the process will be individual to each element.

Updated Fiddle

NOTE : In my example the ID's are not required but i wanted to stress the importance of unique ID's on pages.

Upvotes: 1

skobaljic
skobaljic

Reputation: 9644

You cannot have more than one element with same id on page. You can use several IDs or same class for your script.

For your case, you need to wrap cards into element with position relative. Also you have errors in script, but here is working example Fiddle

Basically, you go with wrapper:

    <div class="card">
        <div class="block" onclick="changeClass(this);">
            <div class="front side">
                    <h2>Box 1</h2>

            </div>
            <div class="back side">
                <p>Box 1 Back Text</p>
            </div>
        </div>
    </div>

Than JS:

function changeClass(el) {
    if (el.className == "block") el.className += "rotated";
    else el.className = "block";
};

Upvotes: 1

Related Questions