The CSS class fails to run when added in a JS file

Question

The CSS class fails to run when added in a JS file

I have just started learning CSS and JS, and despite reviewing my code multiple times, consulting w3schools, and searching for similar issues, I am still unable to pinpoint where the error lies.

     <! DOC TYPE HTML>
<html>
<head>
<h1> fruit dodge</h1>
<link rel="stylesheet" href="FDCSS.css">
</head>
<body onkeypress="jump()">
<div id="game">
    
    <div id="player"></div>

In an attempt to resolve the issue, I moved the event to the body element from the html tag, but it did not solve the problem as intended.

CSS:
.animate
{
    animation: jump 500ms;
}
keyframes jump
{
    0%{top: 400px;}
    30%{top: 350px;}
    70%{top: 350px;}
    100%{top: 400px;}
}

I can confirm that the animation itself is functional as I tested it independently before incorporating it into a class.

var player = getElementById("player");
var fruit = getElementById("fruit");

    function jump()
    {
        player.classList.add("animate");
        setTimeout(function()
        {
            player.classList.remove("animate");
        },500);
    }

The purpose of the jump function is to apply the animate class to the player character momentarily and then remove it after the animation duration (500ms).

javascript html css

Answer 1

Answer №1

There seem to be a few mistakes in your code. In the CSS section, make sure to include an @ symbol before keyframes.

Additionally, it is recommended not to animate the top property and instead use hardware accelerated properties like transform. (refer to the example provided below)

.animate {
  animation: jump 500ms;
}

@keyframes jump {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-40px);
  }
}

In the JavaScript part, avoid using global getElementById(), opt for document.getElementById() to select elements.

var player = document.getElementById("player");
var fruit = document.getElementById("fruit");

function jump() {
  player.classList.add("animate");

  setTimeout(function () {
    player.classList.remove("animate");
  }, 500);
}

var player = document.getElementById("player");
var btn = document.getElementById("btn");

function jump() {
  player.classList.add("animate");

  setTimeout(function() {
    player.classList.remove("animate");
  }, 500);
}

btn.addEventListener("click", jump);

.player {
  background-color: #a1887f;
  border-radius: 50%;
  height: 3rem;
  margin: 4rem auto 1rem;
  width: 3rem;
}

button {
  background-color: #c5e1a5;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  display: block;
  font-size: 1.25rem;
  margin: auto;
  padding: 0.5rem 1rem;
}

.animate {
  animation: jump 500ms;
}

@keyframes jump {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-40px);
  }
}

<div class="player" id="player"></div>
<button id="btn">Jump</button>

Answer 2

There seem to be a few mistakes in your code. In the CSS section, make sure to include an @ symbol before keyframes.

Additionally, it is recommended not to animate the top property and instead use hardware accelerated properties like transform. (refer to the example provided below)

.animate {
  animation: jump 500ms;
}

@keyframes jump {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-40px);
  }
}

In the JavaScript part, avoid using global getElementById(), opt for document.getElementById() to select elements.

var player = document.getElementById("player");
var fruit = document.getElementById("fruit");

function jump() {
  player.classList.add("animate");

  setTimeout(function () {
    player.classList.remove("animate");
  }, 500);
}

var player = document.getElementById("player");
var btn = document.getElementById("btn");

function jump() {
  player.classList.add("animate");

  setTimeout(function() {
    player.classList.remove("animate");
  }, 500);
}

btn.addEventListener("click", jump);

.player {
  background-color: #a1887f;
  border-radius: 50%;
  height: 3rem;
  margin: 4rem auto 1rem;
  width: 3rem;
}

button {
  background-color: #c5e1a5;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  display: block;
  font-size: 1.25rem;
  margin: auto;
  padding: 0.5rem 1rem;
}

.animate {
  animation: jump 500ms;
}

@keyframes jump {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-40px);
  }
}

<div class="player" id="player"></div>
<button id="btn">Jump</button>

The CSS class fails to run when added in a JS file

Answer №1

Similar questions

How to use puppeteer to extract images from HTML that have alt attributes

Ways to increase the size of an element within an array using JavaScript

In Reactjs, the specified property title is not found within the string type

Passing references between multiple components

Inserting a large number of records in MySQL using a batch insertion method

When attempting to incorporate the "active" class into a Bootstrap 4 carousel using jQuery, issues arise specifically when retrieving data from a MongoDB database

Is there a way to change a string that says "False" into a Boolean value representing false?

Tips on extracting the value from an observable and storing it in a variable

Retrieve data from a collection by utilizing ng-repeat

Editing DOM elements within Angular JS using Greasemonkey extension

Enhance the appearance of your custom Component in React Native by applying styles to Styled Components

Struggling to have images line up side by side within a div

The npm command encountered a permission issue when trying to install node-sass

When using Express.js for file uploading, it is important to first verify that a file has been sent, set a maximum file size limit, and ensure

Tips for displaying JSON data by formatting it into separate div elements for the result object

What are the steps for rearranging a table column?

Incorporating the sx attribute into a personalized component

Can two BootstrapVue tooltips be displayed on a single element with different target settings?

Tips for creating a vertical Angular Material slider with CSS

Why is my MySQL query not returning the most recent results when using setInterval()?