Question

我的JavaScript函数存在问题，在＆＃34; for＆＃34;当我使用i来引用列表位置时，它不会识别HTML元素，但是当我使用[0]或[1]时，它会认出来。所以循环部分一定存在问题，但我无法弄清楚它是什么，这里是代码：

(function () {
    "use strict";
    window.animacion_click_menu = function (id) {
        var i;
        var menu = document.getElementById('menu').getElementsByTagName('LI');
        var bloqueActual = document.getElementById(id);
        for (i = 0; i <= menu.length; i++) {      //recorre los LI devolviendolos a su posicion original
            menu[i].style.marginLeft = -40;
            menu[i].style.opacity = 1;
        }
        bloqueActual.style.marginLeft = 200;
        bloqueActual.style.opacity = 0;
    };
})();

这是我的HTML：

<head>
    <meta charset="UTF-8">
    <title>Mario Luque Marchena</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/estilos.css">
</head>

<body>
    <center>
        <h1 class="titulo">Bienvenid@</h1>
    </center>
    <div id="main-screen">
        <ul id="menu">
            <center>
                <li id="sobremi" onclick="window.animacion_click_menu('sobremi');">Sobre mi</li>
                <li id="portafolios" onclick="animacion_click_menu('portafolios');">Portafolios</li>
                <li id="animacion" onclick="animacion_click_menu('animacion');">Animacion</li>
                <li id="back-end" style="border-bottom-style: dashed;" onclick="animacion_click_menu('back-end');">Back-End</li>
            </center>
        </ul>
    </div>  
    <script type="text/javascript" src="js/animaciones.js"></script>
</body>

如果您有任何建议使代码更好，也欢迎，我正在学习编码。谢谢你！对不好的英语感到抱歉，如果它是

Answer 1

您的错误确实在for循环中。看看：

for (i = 0; i <= menu.length; i++) {

它应该是：

for (i = 0; i <= menu.length-1; i++) {

否则，当菜单数组只有4个项目时，它会尝试从0迭代到5。结果是在最后一次迭代中，当您尝试使用不存在的索引（菜单[5]）访问元素菜单时，您会收到错误：

Uncaught TypeError: Cannot read property 'style' of undefined

克服这一点的其他可能性是改变＆lt; = to＆lt;并使用循环：

for (i = 0; i < menu.length; i++) {

Answer 2

使用window.onload（）或

$('document').ready(function(){
  //Put your code here
})

我认为你的代码在创建DOM之前就已经执行了。

JavaScript函数不识别我的HTML元素

2 个答案: