Home/ Questions/Q 7873179
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T02:26:16+00:00

This seems to be a more common problem, but when I try to use

  • 0

This seems to be a more common problem, but when I try to use code off of jsfiddle (html/css/javascript) it doesn’t work. I’m trying to get a CSS animation to repeat onclick, and found some on links on other questions to jsfiddle that work. However, they do not work when I try to do them on DreamWeaver, and I get no error.

I have http://jsfiddle.net/vxcYJ/45/ , http://jsfiddle.net/AndyE/9LYAT/, and http://jsfiddle.net/6tZd3/, and none work. On dreamweaver, I believe the third jsfiddle would translate into something like this:

<!DOCTYPE>
<head>
<style>
.animate {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
}

.initial {
    -webkit-transform: rotate(0deg);
}

.final {
    -webkit-transform: rotate(360deg);
}​
</style>
<script>
document.getElementById('button').addEventListener('click', function()
{
    this.setAttribute('class', 'animate final');
});

document.getElementById('button').addEventListener('webkitTransitionEnd', function() {
    this.setAttribute('class', 'initial');
});​
</script>
</head>

<body>
<button type="button" id="button" class="animate initial">Click me!</button>​
</body>
</html>

one more thing, at the end of the button, this->​ appears for some reason. If anyone could help me out, that would be greaty appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your code is failing for two reasons. Firstly, there are two illegal characters at different places in your code. The one you can see which appears next to the button when you run the page, and the second, which is causing an error in the JavaScript, after the webkitTransitionEnd event listener. Secondly, when you try to add the event listeners to your button in the head of your document, it fails because the DOM has not registered with the browser yet.

    The following code should work. You might also consider looking at the jQuery document ready function. 

    <!DOCTYPE>
<head>
<style>
.animate {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
}

.initial {
    -webkit-transform: rotate(0deg);
}

.final {
    -webkit-transform: rotate(360deg);
}​
</style>

</head>

<body>
<button type="button" id="button" class="animate initial">Click me!</button>​

<script>
document.getElementById('button').addEventListener('click', function()
{
    this.setAttribute('class', 'animate final');
});

document.getElementById('button').addEventListener('webkitTransitionEnd', function() {
    this.setAttribute('class', 'initial');
});
</script>
</body>
</html>
    • 0