What is the best way to flip cards with the onClick event in JavaScript?

My cards are currently facing down with the code* provided. What steps should I take to flip them face up using onClick functions? Furthermore, how can I store the IDs in an Array and use them to retrieve images from my image collection?

HTML

<table style="width:100%">
  <tr>
    <td><img src="cards_gif/b.gif" Class="back" id="0" onClick="flipCard()"></td>
    <td><img src="cards_gif/b.gif" Class="back" id="1" onClick="flipCard()"></td>
    <td><img src="cards_gif/b.gif" Class="back" id="2" onClick="flipCard()"></td>
  </tr>
  <tr>
   <td><img src="cards_gif/b.gif" Class="back" id="3" onClick="flipCard()"></td>
   <td><img src="cards_gif/b.gif" Class="back" id="4" onClick="flipCard()"></td>
   <td><img src="cards_gif/b.gif" Class="back" id="5" onClick="flipCard()"></td>
  </tr>
  <tr>
  <td><img src="cards_gif/b.gif" Class="back" id="6" onClick="flipCard()"></td>
  <td><img src="cards_gif/b.gif" Class="back" id="7" onClick="flipCard()"></td>
  <td><img src="cards_gif/b.gif" Class="back" id="8" onClick="flipCard()"></td>
  </tr>
  <tr>
  <td><img src="cards_gif/b.gif" Class="back" id="9" onClick="flipCard()"></td>
  <td><img src="cards_gif/b.gif" Class="back" id="10" onClick="flipCard()"></td>
  <td><img src="cards_gif/b.gif" Class="back" id="11" onClick="flipCard()"></td>
  </tr>
</table>

CSS

<style>
* {
    background-color: lightblue;
    border-color: hsla(173,100%,50%,1.00);
    font-weight: bold;  
}

.back {
    width:100px;
    height:100px;
}
</style>

JS

function flipCard(theElementID){
    /*var cardID = ["c1","c2","c3"];""3","4","5","6","7","8","9","10","11","12"]; *//ignore
    var theElement.src = document.getElementById(theElementID);
    theElement.src ="c1.gif";
    document.getElementById(c1.gif")
} // don't really understand this function. I also tried using an array to pick the card image if that makes sense.
javascripthtmlcss

Answer №1

Eliminate the unnecessary repetition of the onclick attribute 12 times and connect a click event to the image using a CSS class in just five lines of jQuery:

$(function() {
    $('.back').on('click', function() {
        flipCard(this.id); //Pass the img id to flipCard
    }); 
});

The original code contains some mistakes. Check out this fiddle for guidance: http://jsfiddle.net/GarryPas/gam8tcx7/2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to locate the index.js file within my application using Node.js?

Directory Structure bin - main.js lib - javascript files... models - javascript files... node_modules - folders and files public - index.html route - javascript files... index.js package.json I am using Express and angular.js. The ser ...

javascriptangularjsnode.jsexpress

Automatically identifying cloud functions ready for deployment with the gcloud command line interface

When utilizing Firebase tools, the deployment process is streamlined with auto-detection of available functions by issuing the command: firebase deploy --only functions However, for more extensive control over environment variables and VPC connectors, we ...

javascriptnode.jsfirebasegoogle-cloud-functions

Having difficulty retrieving the specific Laravel validation error message through AJAX

In my Laravel project, the error message I am encountering is: {message: "The given data was invalid.", errors: {oData: ["validation.required"]}} errors: {oData: ["validation.required"]} message: "The given data was invalid." I am not trying to display ...

javascriptphpajaxlaravel

Determine the currently active view on a mobile device

I am trying to determine whether the user is viewing the website vertically or horizontally on their mobile device or iPad in order to adjust the image scale accordingly. For example: If the user is viewing the page horizontally, I want the image style t ...

jquerycssmobile

Tips for creating nested child routes in AngularJS 2 with ID:

Here is a Demo of what I'm working on. Just getting started with angularjs 2 and trying to figure things out. I want to display Twitter names that correspond to certain names using routes on the same page, specifically utilizing a second <router- ...

javascriptangular

Tips for resolving the "trim" of undefined property error in Node.js

Looking to set up a basic WebAPI using Firebase cloud functions with express and TypeScript. Here's the code I have so far: import * as functions from 'firebase-functions'; import * as express from 'express'; const app = express( ...

javascriptnode.jstypescriptfirebasegoogle-cloud-functions

Pseudo-element fails to display in React when applied to a paragraph tag, even with display block property set

I am experiencing an issue where the pseudo element ::after is not appearing in my browser. I am currently working with React.js and Material UI's makeStyles. Here is the code snippet causing the problem: modalTitle: { borderBottom: '2px sol ...

javascriptcssreactjsmaterial-uijsx

Ways to showcase HTML content in angular when receiving entities

Is there a way to properly display HTML characters using HTML entities? Take this scenario for example: Let's say we have the following string: $scope.myString = "&lt;analysis mode=&quot;baseball&quot; ftype=&quot;&quot; version ...

javascriptangularjs

Unable to loop through a list in JavaScript

<script type="text/javascript"> window.onload = function () { for (var i=0;i<@Model.listsinfo.Count;i++) { $('#work').append($('<div class="col-md-3" id="temp"><label for="tex ...

javascriptasp.net-mvc

Button within the Magnific Popup (do not use to close)

I am currently developing a website with a gallery page that utilizes the Magnific Popup plugin. My client has provided lengthy 'captions' for each image, almost like short stories. To display these captions effectively, I have utilized the titl ...

javascriptjquerycssmagnific-popup

Steps for creating a dynamic progress bar with inverted text style using only CSS

I am working on creating a dynamic progress bar with inverted text color using only CSS. To see examples of what I am trying to achieve, you can refer to the following links. Inverted Colors CSS progress bar CSS Progress Bars https://i.sstatic.net/VSs5 ...

htmlcss

Enhance container and typography for layouts converted to 1920px width to improve overall design

Greetings to all! I need some assistance with converting a design file that is 1920px wide into an HTML layout. Can someone provide tips on optimizing containers and typography for responsiveness? Specifically, I would like the font-size and line-height ...

htmljquerycssresponsive-design

Tips for positioning an MUI element inside a container to extend to the edge of the browser window

Currently, I'm working on a project with a Material-UI (MUI) container that contains a Stack element. Within this Stack, there are two Box elements displayed in a row, each set to take up 50% of the width. In my design, I want the second box to break ...

htmlcssreactjsmaterial-ui

Looking to transform an HTML table into a stylish CSS layout complete with a form submission button?

Recently, I've been delving into the world of CSS and PHP as I work on converting old code entirely into HTML and PHP with a touch of CSS. The visual aspect seems fine, but I've hit a roadblock with the submit form due to an IF statement in PHP. ...

javascriptphpjqueryhtmlcss

Let's talk about the CSS properties for centering content and automatically

I've been struggling with getting my navbar to center and adjust its width based on the content inside. Can anyone help me with this? <nav> <ul id="menu" class="black"> <li><a href="index.html">Home</a></l ...

htmlcsscenternavnavbar

Concealing a label for a certain range of values

Does anyone have a clever solution for dynamically hiding a label associated with an input range element when the value is below a certain threshold? And then reappearing it once the value surpasses a specific minimum? Any thoughts on this matter? Thank ...

javascript

Importing GeoJSON data into Meteor's Leaflet

Recently diving into Meteor, I am on a mission to create my own customized version of this impressive example from leaflet incorporated into Meteor: Interactive Choropleth Map The implementation requires the use of this GeoJson Data file: us-states The o ...

javascriptjsonmeteorleafletgeojson

Obtain the value of the background image's URL

Is there a way to extract the value of the background-image URL that is set directly in the element tag using inline styling? <a style="background-image: url(https:// ....)"></a> I attempted to retrieve this information using var url = $(thi ...

javascriptjqueryhtmlcssmongodb

Only the initial value is being processed in the for loop using Javascript

I am having issues trying to sum the values within a for loop sourced from my Django database using JavaScript. Currently, when I iterate through the loop, only the first value in the array is returned. I need assistance in finding a solution that allows ...

javascripthtmldjangomath

Guide on implementing a progress bar for file uploads with JavaScript and AJAX request

I am looking to implement a progress bar in my file uploader. Below is the ajax call I have set up for both file upload and progress tracking. $(function() { $('button[type=button]').click(function(e) { e.preventDefault(); ...

javascriptjqueryajaxfile-uploadprogress-bar