Why can not I see set property 'innerHTML' of undefined?

Navigation
2

Good I've been looking for the reason why I get this error. I have read that it is because of the location of the script and that it is recommended to put it at the end of the whole since the JS reading is from top to bottom, but even so the same error keeps appearing. Here I leave my code: 

div#contenedor .subcontenedor {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px ;
    grid-template-rows: 40px 40px 40px 40px 40px ;
    grid-gap: 5px;
    border: 2px solid red;
    float: left;
    padding: 5px;
/*    visibility: hidden; */
}

div#contenedor .item {
    background-color:darkcyan;
    color: #fff;
    border: 2px solid darkblue;
}
<!DOCTYPE html>
<html lang="es">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <link href="Estilos.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <form action="">
           <h3>Numero Primos</h3>
            <label for="numero">Numero</label>
            <input type="text" name="numero" id="numero" placeholder="Introduce un número">
            <input type="button" name="enviar" value="Generar"
            onclick="generarNAleatorio();"> 
        </form>
        
        <div id="contenedor">
            <div class="subcontenedor">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>
        <script>
            
            function generarNAleatorio(){
                
                var num = parseInt(document.getElementById("numero").value);
                var cantidad = 2;
                var inicio = 1;
                var indicador = 0;
                var contador = 0;
                var indice = 0;
                
            while(contador<=50){ 
                
                 while (inicio<=num){
                    if (num%inicio == 0){
                        indicador+=1;
                    }
                    inicio++;
                }
                
                if(indicador == 2){
                    document.getElementsByClassName("item")[indice].innerHTML = num;
                    contador ++;
                    indice++;
                }
                num += 1;
                indicador = 0;
                inicio = 1;
            }
            
           // document.getElementById("contenedor").style.visibility = "visible";    
                
        }        
        </script>
    </body>
</html>

The process continues to work, but it gives me that error. What is owed or how can I correct it? I hope you can help me thank you very much.

    
asked by Ronald Sanchez 16.11.2017 в 01:25
source

2 answers

2

Error: while(contador <= 50) , why?

You have 50 items, the counter variable starts from 0, then the first item will have index 0 and the last 49.

Solution: while(contador < 50) , I have also created a function probarError() , so you can check it out. 

function generarNAleatorio(){
                
                var num = parseInt(document.getElementById("numero").value);
                var cantidad = 2;
                var inicio = 1;
                var indicador = 0;
                var contador = 0;
                var indice = 0;
                
            while(contador<50){ 
                
                 while (inicio<=num){
                    if (num%inicio == 0){
                        indicador+=1;
                    }
                    inicio++;
                }
                
                if(indicador == 2){
                    document.getElementsByClassName("item")[indice].innerHTML = num;
                    contador ++;
                    indice++;
                }
                num += 1;
                indicador = 0;
                inicio = 1;
            }
            
           // document.getElementById("contenedor").style.visibility = "visible";    
                
        }
        
        function probarError(){
        var items = document.getElementsByClassName("item");
        for(var i =0 ,a = Array.from(items), l = a.length; i<=l;i++){ if(typeof a[i] === "undefined") {
         console.log('El error está en el índice: ${i}');
        }  }
        
        }
        probarError();
div#contenedor .subcontenedor {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px ;
    grid-template-rows: 40px 40px 40px 40px 40px ;
    grid-gap: 5px;
    border: 2px solid red;
    float: left;
    padding: 5px;
/*    visibility: hidden; */
}

div#contenedor .item {
    background-color:darkcyan;
    color: #fff;
    border: 2px solid darkblue;
}
<!DOCTYPE html>
<html lang="es">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <link href="Estilos.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <form action="">
           <h3>Numero Primos</h3>
            <label for="numero">Numero</label>
            <input type="text" name="numero" id="numero" placeholder="Introduce un número">
            <input type="button" name="enviar" value="Generar"
            onclick="generarNAleatorio();"> 
        </form>
        
        <div id="contenedor">
            <div class="subcontenedor">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>
    </body>
</html>
    
answered by 16.11.2017 / 03:26
source
-1

change this while (counter

answered by 16.11.2017 в 01:42
WordPress child theme is not shown as the parent theme Crystal Reports Throw "E_NOINTERFACE" when you report.SetDataSource (ds);