CODEWITHSUNDEEP
javascript
Halen
Halen

Reputation: 91

JavaScript function doesn't recognize my HTML element

I have a problem with my JavaScript function, in the "for" part it doesn't recognize the HTML elements when I use i to refer to the list position, but when I use [0] or [1], for example, it does recognize it. So there must be a problem with the loop part but I can't figure out what is it, here is the code:

(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;
    };
})();

and here's my 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>

if you have any suggestions to make the code better, are welcome too, i'm learning to code. thank you!, and sorry for the bad english in case it was

Upvotes: 0

Views: 348

Answers (2)

Andr&#233; Teixeira
Andr&#233; Teixeira

Reputation: 2562

Your error is really on the for loop. Take a look on:

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

it should be:

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

Otherwise, it will try to iterate from 0 to 5 while your menu array has only 4 items. The result is that in the last iteration, when you try to access the element menu with the inexistent index (menu[5]) you get the error:

Uncaught TypeError: Cannot read property 'style' of undefined

Other possibility to overcome this is to change <= to < and work with the loop as:

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

Upvotes: 2

Prabhakar Pandey
Prabhakar Pandey

Reputation: 83

use window.onload() or 

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

I think your code is getting executed before DOM creation.

Upvotes: -1

Related Questions