JavaScript不触发

我这里有一个动画脚本的开头：

<div id="card5">
    <h4 class="y">Let me be your guide.</h4>
    <h1>Here's what I've got:</h1>

    <div id="a">
        <h4 id="aa">Creativity</h4>
    </div>

    <div id="b">
        <h4 id="bb">Know-how</h4>
    </div>

    <div id="c">
        <h4 id="cc">Familiarity</h4>
    </div>
</div>

<script type="text/javascript">
    var aa = document.getElementById("aa");
    var bb = document.getElementById("bb");
    var cc = document.getElementById("cc");

    var aamargin = style.aa.marginTop | 30;
    var bbmargin = style.bb.marginTop | 30;
    var ccmargin = style.cc.marginTop | 30;

    var a = document.getElementById("a");
    var b = document.getElementById("b");
    var c = document.getElementsByTagName("c");

    var aadown = true;
    var bbdown = true;
    var ccdown = true;

    a.onmouseover = amove;
    b.onmouseover = bmove;
    c.onmouseover = cmove;

    function amove() {
        window.alert("Herro!");
        if (aadown) {
            aaup();
            aadown = false;
        }
    }

    function aaup() {
        if (aamargin > 0) {
            aamargin -= 1;
            style.aa.marginTop = aamargin + "%";
            requestAnimationFrame(aaup);
        }
    }
</script>

让我做你的向导。
以下是我得到的：
创造力
专门知识
熟悉度
var aa=document.getElementById（“aa”）；
var bb=document.getElementById（“bb”）；
var cc=document.getElementById（“cc”）；
var aamargin=style.aa.marginTop | 30；
var bbmargin=style.bb.marginTop | 30；
var ccmargin=style.cc.marginTop | 30；
var a=document.getElementById（“a”）；
var b=document.getElementById（“b”）；
var c=document.getElementsByTagName（“c”）；
var aadown=真；
var bbdown=真；
var-ccdown=true；
a、 onmouseover=amove；
b、 onmouseover=bmove；
c、 onmouseover=cmove；
函数amove（）{
窗口。警报（“Herro！”）；
如果（aadown）{
aaup（）；
aadown=false；
}
}
函数aaup（）{
如果（aamargin>0）{
aamargin-=1；
style.aa.marginTop=aamargin+“%”；
requestAnimationFrame（aaup）；
}
}

当然，当我将鼠标移到第一个div（“a”）上时，什么也没发生。我在其中放了一个警报框，以查看是否触发了amove（）函数，而不是。警报从未发出。不知道为什么。可能只是某个地方的输入错误…

错误在这里：

var aamargin = style.aa.marginTop | 30;
var bbmargin = style.bb.marginTop | 30;
var ccmargin = style.cc.marginTop | 30;

---

我想你的意思是

aa.style

而不是

style.aa

？

两个错误与

style.aa.marginTop | 30：


|
是位运算符，如果需要逻辑OR，则需要
|
，如下所示：
style.aa.marginTop | 30

style
未定义，您需要
aa.style
，如下：
aa.style.marginTop | 30


最后一点：
bmove
和
cmove
未定义

请参见此处的修补示例：



让我做你的向导。
以下是我得到的：
创造力
专门知识
熟悉度
var aa=document.getElementById（“aa”）；
var bb=document.getElementById（“bb”）；
var cc=document.getElementById（“cc”）；
var aamargin=aa.style.marginTop | | 30；
var bbmargin=bb.style.marginTop | | 30；
var ccmargin=cc.style.marginTop | | 30；
var a=document.getElementById（“a”）；
var b=document.getElementById（“b”）；
var c=document.getElementsByTagName（“c”）；
var aadown=真；
var bbdown=真；
var-ccdown=true；
bmove=cmove=amove；//只是一个快速修复
a、 onmouseover=amove；
b、 onmouseover=bmove；
c、 onmouseover=cmove；
函数amove（）{
窗口。警报（“Herro！”）；
如果（aadown）{
aaup（）；
aadown=false；
}
}
函数aaup（）{
如果（aamargin>0）{
aamargin-=1；
aa.style.marginTop=aamargin+“%”；
requestAnimationFrame（aaup）；
}
}
您是否在浏览器控制台中检查错误
aa.style
not
style.aa