onClick 没有运行功能？？（可能 Javascript 错误？）

Question

我想做的就是通过单击按钮将我的 javascript 功能设置为运行。（目前有一个硬编码的值）但是当我这样做的时候，我什至没有得到 alert();在函数的第一部分......就像按钮点击被禁用了！有什么建议吗？

此外，我无法获取此代码以正确更改 CSS 样式表，然后根据该度数的差异制作图像旋转。

<html>
<head>
    <link href="main.css" type="text/css" rel="stylesheet" />
    <script>
function findKeyframesRule(rule)
{
    // gather all stylesheets into an array
    var ss = document.querySelector("link[href='main.css']").sheet;
    alert(ss.name);
    var pointer;
    var webkitKeyframe;
    var keyFrame;
        // loop through all the rules
        for (var j = 0; j < ss.cssRules.length; ++j) {

            // find the -webkit-keyframe rule whose name matches our passed over parameter and return that rule
            if (ss.cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE 
                && ss.cssRules[j].name == rule) {
                alert(ss.cssRules[j]);
                webkitKeyframe = ss.cssRules[j];
            }
            if (ss.cssRules[j].type == window.CSSRule.KEYFRAMES_RULE 
                && ss.cssRules[j].name = rule){
                alert(ss.cssRules[j]);
                webkitKeyframe = ss.cssRules[j];
            }
            if (ss.cssRules[j].type == window.CSSRule.STYLE_RULE 
                && ss.cssRules[j].name = ".arrow") {
                alert(ss.cssRules[j]);
                pointer = ss.cssRules[j];
            }
        }

    var rules = [webkitKeyframe, keyFrame, pointer];
    return rules;

    // rule not found
}

function findCurrentAngle(el) {               
    var st = window.getComputedStyle(el, null);

    var tr = st.getPropertyValue("-webkit-transform") ||
                st.getPropertyValue("-moz-transform") ||
                st.getPropertyValue("-ms-transform") ||
                st.getPropertyValue("-o-transform") ||
                st.getPropertyValue("transform") ||
        "Either no transform set, or browser doesn't do getComputedStyle";

    var values = tr.split('(')[1],
        values = values.split(')')[0],
        values = values.split(',');

    var a = values[0];
    var b = values[1];
    var c = values[2];
    var d = values[3];

    var angle = Math.round(Math.asin(b) * (180/Math.PI));
    //alert(angle);

    return angle;
}

// remove old keyframes and add new ones
function change(anim, newDeg){                
        var el = document.getElementById("arrow");

        // find our -webkit-keyframe rule
        var keyframes = findKeyframesRule(anim);

        var currentDeg = findCurrentAngle(el);

        //alert(currentDeg);


        // remove the existing 0% and 100% rules
        keyframes[0].deleteRule("0%");
        keyframes[0].deleteRule("100%");

        // create new 0% and 100% rules with random numbers
        keyframes[0].insertRule("0% { transform: rotate("+ currentDeg +"deg); }");
        keyframes[0].insertRule("100% { transform: rotate("+ newDeg +"deg); }");

        // remove the existing 0% and 100% rules
        keyframes[1].deleteRule("0%");
        keyframes[1].deleteRule("100%");

        // create new 0% and 100% rules with random numbers
        keyframes[1].insertRule("0% { transform: rotate("+ currentDeg +"deg); }");
        keyframes[1].insertRule("100% { transform: rotate("+ newDeg +"deg); }");

        keyframes[2].style.WebkitTransform = "rotate(" + newDeg + "deg)";
        keyframes[2].style.Transform = "rotate(" + newDeg + "deg)";
        el.className = "arrow";

        //alert("Changes Done");

        // assign the animation to our element (which will cause the animation to run)
        //document.getElementById('arrow').style.webkitAnimationName = anim;
    }

// begin the new animation process
function startChange(newDeg){
        // remove the old animation from our object
        //document.getElementById('arrow').style.webkitAnimationName = "none";
        alert("Start Change Done");
        // call the change method, which will update the keyframe animation
        setTimeout(function(){change("rotate", newDeg);}, 0);
}</script>
</head>
<body>
    <div>
        <img src="arrow.png" id="arrow" class="arrow" />
    </div>
    <button id="button" onclick="startChange(90)">Get Quote!</button>
</body>

Answer 1

您在较早的函数中有一些无效的 JS，这导致了解析错误。您的两个 if 语句使用单个“=”运算符而不是“==”。单'='用于赋值，双'=='用于比较操作。

...
if (ss.cssRules[j].type == window.CSSRule.KEYFRAMES_RULE && ss.cssRules[j].name == rule){   //you only had a single '=' sign here
    alert(ss.cssRules[j]);
    webkitKeyframe = ss.cssRules[j];
}
if (ss.cssRules[j].type == window.CSSRule.STYLE_RULE && ss.cssRules[j].name == ".arrow") {   //you only had a single '=' sign here
    alert(ss.cssRules[j]);
    pointer = ss.cssRules[j];
}
...

JSFiddle DEMO

Answer 2

您的代码中有一个错误显示无效的左手赋值用这个函数替换您的 findKeyframesRule 函数它会起作用

function findKeyframesRule(rule)
{
    // gather all stylesheets into an array
    var ss = document.querySelector("link[href='main.css']").sheet;
    alert(ss.name);
    var pointer;
    var webkitKeyframe;
    var keyFrame;
        // loop through all the rules
        for (var j = 0; j < ss.cssRules.length; ++j) {

            // find the -webkit-keyframe rule whose name matches our passed over parameter and return that rule
            if (ss.cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE 
                && ss.cssRules[j].name == rule) {
                alert(ss.cssRules[j]);
                webkitKeyframe = ss.cssRules[j];
            }
            if (ss.cssRules[j].type == window.CSSRule.KEYFRAMES_RULE 
                && ss.cssRules[j].name == rule){
                alert(ss.cssRules[j]);
                webkitKeyframe = ss.cssRules[j];
            }
            if (ss.cssRules[j].type == window.CSSRule.STYLE_RULE 
                && ss.cssRules[j].name == ".arrow") {
                alert(ss.cssRules[j]);
                pointer = ss.cssRules[j];
            }
        }

    var rules = [webkitKeyframe, keyFrame, pointer];
    return rules;

    // rule not found
}

onClick 没有运行 功能？？ （可能 Javascript 错误？）

onClick not running function?? (Possible Javascript Fault?)

html

javascript

css

animation

onClick 没有运行功能？？（可能 Javascript 错误？）