0

I am creating hover flip cards for an instructions manual, and I would like to create a button that would flip them all at once. To get the cards flipping, I only relied on CSS, but to make the button I need some javascript, which I have no idea how to use. Can anyone help me?

<script>
const flip-card = document.getElementByClassName("flip-card-inner")
flip-card.addEventListener("click",flipCard);
function flipCard() {
card.classList.toggle("flip-card-inner");
}
</script>
<body>
   <button type="button" class="flipCard">Flip all</button>
    <p/>
    <div class="flip-card">
        <div class="flip-card-inner">
           <div class="flip-card-front">
                <h5>Title</h5>
              
            </div>
            <div class="flip-card-back">
                <ul style="font-size: 10pt;">
                    <li>Some text</li>
                    </ul>
            </div>
        </div>
    </div>
Zmaya
  • 1
  • 1
  • variable names can not have a `-` in it. getElementByClassName returns an html collection, so you can not bind an event. `const flipCard = document.getElementByClassName("flip-card-inner")[0];` better `const flipCard = document.querySelector(".flip-card-inner")` – epascarello Nov 25 '22 at 16:05
  • Java is not short for JavaScript. – epascarello Nov 25 '22 at 16:08
  • Thanks. Not sure what to make of this answer due to my lack of knowledge, but will keep chugging away. As embarassing as it may be, I am not a coder, just stubborn enough and learning as I go along. At least I learnt that Java is not short for Javascript. – Zmaya Nov 25 '22 at 20:03

0 Answers0