on点击不运行功能??(可能是Javascript错误?）

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

本文关键字：Javascript 错误 运行 功能 on      更新时间：2023-09-26

我要做的就是通过单击按钮来运行我的javascript函数。（当前具有硬编码值）但是当我这样做时，我什至没有收到警报（）;在函数的第一部分...就像按钮点击被禁用一样！有什么建议吗？

此外，我无法让此代码正确更改 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>

您在早期的函数中有一些无效的 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

您的代码中存在一个错误，显示无效的左侧赋值 用这个函数替换你的 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
}
相关文章：