代码工作jsfiddle不在Dreamweaver上工作 [英] Codes works jsfiddle not working on dreamweaver
问题描述
这似乎是一个更常见的问题，但是当我尝试使用jsfiddle（html / css / javascript）的代码时，它不起作用。我正在尝试获得一个CSS动画来重复onclick，并在其他问题上找到一些关于jsfiddle的链接。但是，当我尝试在DreamWeaver上执行它们时它们不起作用，我没有得到任何错误。
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.
<!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.
推荐答案
您的代码失败有两个原因。首先，代码中的不同位置有两个非法字符。运行页面时，您可以看到按钮旁边显示的那个，以及在webkitTransitionEnd事件侦听器之后导致JavaScript出错的第二个。其次，当您尝试将事件侦听器添加到文档头部的按钮时，它会失败，因为DOM尚未在浏览器中注册。
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.
以下代码应该工作。您也可以考虑查看 jQuery文档就绪功能。
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>
这篇关于代码工作jsfiddle不在Dreamweaver上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
