JavaScript函数无法识别我的HTML元素

JavaScript function doesn't recognize my HTML element

本文关键字：我的 HTML 元素 识别 函数 JavaScript      更新时间：2023-09-26

我的JavaScript函数有问题，在"for"部分，当我使用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>

如果您有任何使代码更好的建议，也欢迎，我正在学习编码。 谢谢！，很抱歉英语不好，以防万一

你的错误真的在 for 循环中。看看：

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

它应该是：

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

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

Uncaught TypeError: Cannot read property 'style' of undefined

克服此问题的其他可能性是将 <= 更改为 <并将循环处理为：>

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

使用 window.onload（） 或 

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

我认为您的代码在创建 DOM 之前就被执行了。

相关文章：