-4

I would like to understand if it is possible instead to make sure that a data collected with the javascript part can modify one in the css specifically based on a number returned by the javascript code you change the speed of the transitions in the css (I put the js code created below from @elikoga)

// script to check how long a button has been pressed
const button = document.querySelector('button');
const div = document.querySelector('div');

let startTime;
let endTime;

// attach event listener to button
button.addEventListener('mousedown', (e) => {
  startTime = new Date();
});

// attach event listener to button
button.addEventListener('mouseup', (e) => {
  endTime = new Date();
  const timeDiff = endTime - startTime;
  div.textContent = `You pressed the button for ${timeDiff} milliseconds`;
});
<button>Press me!</button>
<div></div>
Custy
  • 1
  • 2
  • Consider adding punctuation to your question as an incentive for more people to read and respond to it. – Cat Jan 04 '22 at 00:24

1 Answers1

0

Yes, you can change a lot of things. Your question is super general, so it is hard to help you accurately.

this is how to set the animation duration with javascript:

document.getElementById("myDIV").style.animationDuration = "3s";
Deniz Karadağ
  • 751
  • 3
  • 8
  • thanks, to be more precise I would like that for example if the time is close to 44 milliseconds in the CSS the transition of an animation will become 0.4 s instead of 6s, or as the milliseconds it takes to click the button increases, the value of the seconds of the transition in the CSS – Custy Jan 04 '22 at 00:30
  • this is how to set the animation duration document.getElementById("myDIV").style.animationDuration = "3s"; so you can use it with any other function or condition. if (somecriteria) { this is how to set the animation duration document.getElementById("myDIV").style.animationDuration = "13s"; } else { do other things } – Deniz Karadağ Jan 04 '22 at 07:39