const btt = document.querySelector('.btt');
btt.addEventListener('click', function(){
this.classList.toggle('anime');
});
Is there a way to achieve the desired effect with just one click?
const btt = document.querySelector('.btt');
btt.addEventListener('click', function(){
this.classList.toggle('anime');
});
Is there a way to achieve the desired effect with just one click?
I'm not sure if I comprehend your meaning.
If you want to replay the same animation with a single click, just add the following style to the mudaCor class:
animation-iteration-count: infinite;
Your CSS file should look like this:
*{
margin:0;
padding:0;
box-sizing:border-box;
}
@keyframes mudaCor{
0% {
background: orange;
}
50% {
background: blue;
}
100% {
background: orange;
}
animation-iteration-count: infinite;
}
.btt{
margin: 10px;
padding: 10px;
background: orange;
}
.mudaCor{
animation: mudaCor 2s linear;
animation-iteration-count: infinite;
}
I hope this information proves helpful to you.
To achieve this behavior, you can utilize the requestAnimationFrame method. Simply click the button to remove and then re-add the class in order to restart the animation.
var btt = document.querySelector('.btt');
btt.addEventListener('click', function() {
this.classList.remove('mudaCor');
requestAnimationFrame(() => {
this.classList.add('mudaCor');
});
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@keyframes mudaCor {
0% {
background: orange;
}
50% {
background: blue;
}
100% {
background: orange;
}
}
.btt {
margin: 10px;
padding: 10px;
background: orange;
}
.mudaCor {
animation: mudaCor 2s linear;
}<button class="btt">CLIQUE1</button>Why not try utilizing setInterval to execute the click code repeatedly.
var button = document.querySelectorAll('.button')[0];
button.addEventListener('click', function() {
let element = this;
setInterval(function() {
element.classList.toggle('changeColor')
}, 1500)
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@keyframes changeColor {
0% {
background: orange;
}
50% {
background: blue;
}
100% {
background: orange;
}
}
.button {
margin: 10px;
padding: 10px;
background: orange;
}
.changeColor {
animation: changeColor 2s linear;
}<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=">
</head>
<body>
<div class="container">
<button class="button">CLICK</button>
</div>
</body>
</html>As a complete beginner, I want to clarify that I may not be using the correct terminology in my question. I am embarking on creating an HTML5/Javascript application with Intel XDK to retrieve barcode information for video games from an online API. Specifi ...
When I place a flexbox inside a list item, the content is being pushed down by what seems to be a full line height. I have tried various CSS properties like setting margin-top: 0 for the flexbox, margin-top: 0 for its children, adding flex-wrap to the fle ...
As a newcomer to JavaScript, I am exploring the best approach for a specific task. The task involves a form with checkboxes representing different music styles and a selector for names of people. The goal is to allow users to select music styles for mult ...
For a while now, the trend has been leaning towards feature detection. I am interested in determining whether a visitor's browser supports the :hover pseudo class. With many mobile devices not supporting hovering, I want to adjust my event listeners a ...
While working with Vue 3 and Vite, I came across an issue that seems quite strange. The Oh Vue Icons library is loading a massive 108 MB of bundle size, which significantly slows down the loading time even in ViteJS. Here's how my setup looks like: im ...
Hello, I've incorporated a Material UI table into one of my projects with a design concept similar to this - https://i.stack.imgur.com/i6Fsj.png I'm aiming to include icons within the tables. Here's the code I've worked on so far - ...
I'm facing difficulties with self-hosting webfonts in my NextJS application. The browser is trying to access the fonts using this URL: localhost:3000/_next/static/css/fonts/Avenir.woff2 However, the actual path for these fonts is: _project_dir/static ...
Can someone help me figure out how to use a regex expression to split my string that contains HTML code? NSString* regex = @"<.*?>"; NSString* html = @"<span class="test">Test1</span><span class="test">Test2</span><span cl ...
How to Retrieve a List in My Components Using Input : @Input() usersInput: Section[]; export interface Section { displayName: string; userId: number; title: number; } Here is the Value List : 0: displayName: "بدون نام" ...
After retrieving a specific object from an express endpoint and seeing it on the console, I need to figure out how to map it in order to display a jsx that resembles this <li>keys</li> : <li>values</li> For example: Company: DML ...
I've scoured the internet for examples but haven't found a suitable one that accomplishes the simple task I need. Maybe you can assist me with it. Here is an array of objects: [ { "date": "2015-01-01T12:00:00.000Z", "photoUrl": "", ...
I have a collection of arrays named "list0" through "list7" which have been explicitly defined. My goal is to include each of these arrays as elements in an existing array, creating a 2D array of these defined arrays. How can I reference each 'list&a ...
I have been struggling to configure a jQuery/ajax form to successfully post data and have it sent via email to a PHP file. Below is the jQuery code being used: $( "#sendbut3" ).click(function() { var ntext = $( "#smallfield3" ).val(); var ptext = $( "#sm ...
Hey there! I'm new to Material-ui/ReactJS and I have a question. I'm trying to change the cursor to a pointer when hovering over a Material-ui TextField, but it's proving to be quite challenging. The default behavior is 'cursor: text&ap ...
Is there a way to make the first section of a parallax site full screen? I've been scouring the internet for a solution to this problem, but I'm not having any luck. Almost every parallax site I come across has their first section full screen, a ...
Here is a simple code snippet for creating a line that changes color on hover: li::after { height: 2px; display: block; background: rgb(195, 195, 195); border-right: 1px white; content: ''; } li:hover:after { position: relative; ...
I am looking to modify the largePageDataBytes setting, despite knowing it may impact performance. I made an attempt in next.config.js with the following code: /** * @type {import('next').NextConfig} */ const nextConfig = { /* config options h ...
I have a question regarding formatting h2 and h3 elements to display as inline-block. Below is the code snippet: <div id="content" class="content-width"> <h2 class="headline"> My Headline </h2> <h3 class="subheadline"> My S ...
My introduction to TypeScript was an interesting experience. I decided to convert a simple JavaScript application, consisting of two files, into TypeScript. The first file, accounts.ts, contains the main code, while the second one, fiat.ts, is a support f ...
While I am working on DOM manipulation, I have encountered the need to insert large blocks of HTML. I am looking for a more efficient way to do this rather than relying on concatenation or creating a messy code structure. Consider the simple code snippet b ...