How come the CSS doesn't animate when I use JavaScript to switch the class?

I've implemented the Animate.css library by Daniel Eden, which I obtained from this source. Utilizing the animated (typeOfAnimation) class allows me to easily animate elements on my website.

Below is a snippet of my HTML:

<button onmouseover="makeEnglishPulse()" id="english" class="animated bounceInRight">// English</button>

And this is my JavaScript code:

function makeEnglishPulse() {
    document.getElementById("english").class = "animated pulse";
}

While the button bounces in upon loading the page, it fails to pulse when hovering over it, despite the class being updated. Any suggestions provided should be limited to JavaScript or HTML.

Thank you!

javascripthtmlcssanimation

Answer №1

Remember, you should use .className, not .class.

function activateEnglishPulse() {
    document.getElementById("english").className = "animated pulse";
}

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

What is the best way to connect the control in a Datalist with a fresh value?

When trying to play a video using HTML5 controls, I encountered an issue. The video was saved in the database with the path "~/res/Files/test.ogv" and it wasn't playing properly due to the presence of "~/". I wrote some code to remove t ...

asp.nethtmlvideo

Increase the jQuery Array

After successfully initializing an Array, how can I add items to it? Is it through the push() method that I've heard about? I'm having trouble finding it... ...

javascriptjquery

Having difficulty linking the Jquery Deferred object with the Jquery 1.9.1 promise

I have been developing a framework that can add validation logic at runtime. This logic can include synchronous, asynchronous, Ajax calls, and timeouts. Below is the JavaScript code snippet: var Module = { Igniter: function (sender) { var getI ...

javascriptjquerypromise

@media doesn't seem to be functioning properly when the screen width is below

I've been working on making my website fully responsive, but I've run into an issue where it won't recognize anything below 980px in width. Here is the CSS code I'm using: @media screen and (max-width:1029px){ h1{ font-size ...

cssresponsive-designmedia-queries

Employing CSS for page breaks, while contained within a DIV that is absolutely positioned

I have integrated the ASP.NET AJAX ModalPopupExtender into a webpage. The popup displays details of customer orders that need to be printed, with each order ideally on a separate page. Unfortunately, the CSS page-break-after style doesn't seem to wor ...

asp.nethtmlcssasp.net-ajaxmodalpopupextender

Unable to access frame: Error - Unable to retrieve 'add' property from undefined

I am working on customizing the chatbot functionality for my website built with Nuxt.js. I want the chatbot to display on certain pages while remaining hidden on others. Unfortunately, I encountered an issue when trying to hide it on specific pages. To im ...

javascriptcssvue.jsdomnuxt.js

Using jQuery to Drag: Creating a draggable effect on a div element

I recently posted a question, but I feel like I need to rephrase it to make it more general. Basically, I have an element that can be moved around and resized using jQuery. I used CSS to attach another div to the right of this element. Initially, when you ...

jqueryhtmlcssdrag

The schema encountered an error due to the absence of the save method

My current goal is to allow a logged in user to visit any user's URL and follow them. However, I'm encountering an issue: TypeError: Object { _id: 54bd6b90b7d4cc8c10b40cbd, name: 'Johnny', username: 'batman', __v: 0, ...

javascriptnode.jsmongodbmongoosemongodb-query

Puppeteer failing to detect dialog boxes

I'm attempting to simulate an alert box with Puppeteer for testing purposes: message = ''; await page.goto('http://localhost:8080/', { waitUntil: 'networkidle2' }); await page.$eval('#value&apos ...

javascriptnode.jsexpressjestjspuppeteer

Counting Numbers with jQuery Animation from Zero to Percentage Value

I am currently working on a project where I aim to incorporate a jQuery Animated Number Counter, starting from zero and ending at a specified percentage value. The values of the counter are dynamically retrieved from a database. function timer() { if ...

jqueryhtmltimercounteranimator

Combining two sets of JSON data in JavaScript with JQUERY

I am looking to combine two JSON datasets using JavaScript or jQuery. var object1 = [{ "id": 11, "name": "Vasanth", "username": "Vasanth.Rajendran", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c5a ...

javascriptjqueryjson

Tips for utilizing jQuery to identify an image that is being hovered on?

Concept My goal is to create an effect where a user hovers over an image and a transparent overlay div appears on top of it. This overlay div starts with a height of 0px and should increase to half of the image height upon hover. The hover functionality ...

javascriptjqueryhtmlcss

The Chip Component in MUI dynamically alters its background color when it is selected

Currently, I am working on a project in React where I am utilizing the MUI's Chip component. My goal is to customize this component so that it changes its background color when selected, instead of sticking to the default generic color. https://i.sta ...

javascriptcssreactjsbootstrap-4material-ui

What is the best way to ensure that an anchor in a scrolling list adjusts its width based on its children's content?

Check out the setup I have here: http://jsfiddle.net/9F6CF/ In this scenario, there is a list containing anchors within each list item. The UL element has a specific width and an overflow set to auto, causing text in the anchors to scroll horizontally if ...

htmlcss

Transform large GeoJSON files into TopoJSON format

I am struggling to convert a large GeoJSON file that is approximately 1.4GB in size. The command line tool is unable to handle the file due to its filesize. I typically use the topojson command tool like so: topojson {{ input file }} >> {{ output fi ...

javascriptjsontopojson

Tips for utilizing document.write() with a document rather than just plain text

Currently, I am utilizing socket.io to develop a party game that shares similarities with cards against humanity. My main concern is how to retain the players' names and scores without needing to transmit all the data to a new page whenever new games ...

javascripthtmlnode.jssocket.io

What could be the reason for one AngularJS component displaying the ng-model value correctly while the other one fails to do so?

I am currently working on creating a set of dynamic components that can be imported into a main component. It is much more convenient to nest components inside one another when I can pass all objects into a single binding instead of creating multiple bindi ...

javascriptangularjsangular-ngmodelangular-components

AngularJS date formatting fails to properly format dates

{{ map.thedate }} The result is 2014-06-29 16:43:48 Even after using the following code, it still displays the same date as above. {{ map.thedate | date:'medium' }} ...

javascriptangularjs

Using HTML5 to overlay text on an image with a hyperlink

I'm interested in adding a hyperlink on top of an image using HTML5. Can you provide some guidance on how to achieve this? Regards, Ravi ...

javascripthtml

How can I create a hyperlink that leads to multiple pages?

I am looking to create a hyperlink that will lead to a random webpage each time it is clicked from a selection of URLs. Can anyone suggest a suitable function to get started on this task? ...

html