[SOLUCIONADO] Javascript funciona en código pero no en archivo

JUMASOL · #1 (**permalink**) 15/02/2017, 12:27

Hola.

Tengo este javascript para eliminar un div de clase si hay un texto en el html:

Código:

if(document.body.innerHTML.toString().indexOf('Usuario') > -1){
var resultados = document.getElementsByClassName('online'), i;
for (i = 0; i < resultados.length; i += 1) {
resultados[i].style.display = 'none';
}
};

Funciona si lo coloco así al final del html, pero no funciona si lo meto en un archivo javascript que también se incluye en el mismo lugar de la página. De hecho, he colocado el código en la página justo debajo del link al archivo .js. Pero así no funciona.

¿Sabéis dónde puede estar el fallo?

Gracias.

Triby · #2 (**permalink**) 15/02/2017, 12:56

Posiblemente el navegador carga el script antes de renderizar la página, por lo que no encuentra el elemento a eliminar.

Lo más recomendable sería ejecutar el script al finalizar la carga de la página, con el evento onload.

JUMASOL · #3 (**permalink**) 17/02/2017, 08:10

Lo he puesto así, pero sólo funciona si lo pones en la página en sí, porque si lo coloco en el archivo js no

Código:

function resulta() {
if(document.body.innerHTML.toString().indexOf('Usuario') > -1){
var resultados = document.getElementsByClassName('online'), i;
for (i = 0; i < resultados.length; i += 1) {
resultados[i].style.display = 'none';
}
};
window.onload = resulta;

Esto tampoco:

window.onload = function () {
if(document.body.innerHTML.toString().indexOf('Usu ario') > -1){
var resultados = document.getElementsByClassName('online'), i;
for (i = 0; i < resultados.length; i += 1) {
resultados[i].style.display = 'none';
}
};

No quiero poner onload en el body ni en ningún otro lado de la página.

mpozo · #4 (**permalink**) 17/02/2017, 09:32

¿Qué error te muestra?

Llendo a afinar el código, esta línea

Código HTML:

Ver originaldocument.body.innerHTML.toString

la puedes reemplazar por

Código HTML:

Ver originaldocument.body.textContent

JUMASOL · #5 (**permalink**) 17/02/2017, 11:13

No muestra ningún error. Es simplemente que no lo aplica de ninguna forma. Es como si no estuviera.

Luego he leído por ahí cierta problemática con el onload en archivos aparte. ¿Es posible sacarlo de la página y que funcione desde un archivo?

mpozo · #6 (**permalink**) 17/02/2017, 14:46

¿Te funciona esto?

Código HTML:

Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
        <style>
            
        </style>
        <script src="prueba.js"></script>
    </head>
    <body>
 
        <div id="container">
            <div class="header">
                <div class="logo">Usuario</div>
                <div class="flex-column">
                    <section id="ocultar">Teléfono y email</section>
                    <section>
                        <ul>
                            <li>Opción 1</li>
                            <li>Opción 2</li>
                        </ul>
                    </section>
                </div>
            </div>
        </div>
 
    </body>
</html>

prueba.js

Código Javascript:

Ver originaldocument.addEventListener('DOMContentLoaded', function() {
 
    console.log(document.body.textContent);
 
    if(~document.body.textContent.indexOf('Usuario')){
 
        [].forEach.call(document.querySelectorAll('ul > li'), function(elem) {
 
            elem.style.display = 'none';
        });
    }; 
 
}, false);

JUMASOL · #7 (**permalink**) 18/02/2017, 12:14

Sí, funciona, pero lo he tenido que sustituirlo incluyendo getElementsByClassName, porque se trata de identificar un selector de clase.

Código:

document.addEventListener('DOMContentLoaded', function() {
console.log(document.body.textContent);
if(~document.body.textContent.indexOf('Usuario')){
[].forEach.call(document.getElementsByClassName('online'), function(elem) {
elem.style.display = 'none';
});
}; 
}, false);

Funciona. Pero me gustaría que me alguien me dijese qué función cumple esta línea:

Código:

console.log(document.body.textContent);

Además he tenido que duplicarlo porque al existir "Usuario" han de eliminarse dos selectores y no sólo uno, y lo he dejado así:

Código:

document.addEventListener('DOMContentLoaded', function() {
console.log(document.body.textContent);
if(~document.body.textContent.indexOf('Usuario')){
[].forEach.call(document.getElementsByClassName('online'), function(elem) {
elem.style.display = 'none';
}
);
[].forEach.call(document.getElementsByClassName('online boton'), function(elem) {
elem.style.display = 'none';
}
);
}; 
}, false);

En este último caso, quizás sería otra la fórmula para agrupar estas dos funciones. Me gustaría que me dieseis vuestro parecer sobre ello.

Un saludo.

mpozo · #8 (**permalink**) 18/02/2017, 13:36

Cita:

Iniciado por JUMASOL

Sí, funciona, pero lo he tenido que sustituirlo incluyendo getElementsByClassName, porque se trata de identificar un selector de clase.

getElement está desactualizado. Únicamente es conveniente usarlo cuando se necesite el nodeList esté live. En este tema puedes leer sobre ello http://www.forosdelweb.com/f13/propi...9/#post4809259

querySelector o querySelectorAll pueden obtener elementos tanto por su id, class, name, etc. En tu caso sería querySelectorAll('.online')

Cita:

Iniciado por JUMASOL

Funciona. Pero me gustaría que me alguien me dijese qué función cumple esta línea:

Código:

console.log(document.body.textContent);

Es para que vieras, en la consola, la diferencia entre

console.log(document.body.textContent)
console.log(document.body.innerHTML)

Como puedes observar para obtener el mismo resultado, debes de añadir el método toString() aparte de que innerHTML ha de serializar y analizar, mientras que textContent, no

console.log(document.body.innerHTML.toString())

Cita:

Iniciado por JUMASOL

Además he tenido que duplicarlo porque al existir "Usuario" han de eliminarse dos selectores y no sólo uno

No es necesario si el número de elemento .online y .online boton es el mismo

Código Javascript:

Ver originaldocument.addEventListener('DOMContentLoaded', function() {
 
    console.log(document.body.textContent);
 
    if(~document.body.textContent.indexOf('Usuario')){
 
        [].forEach.call(document.querySelectorAll('online'), function(elem, i) {
 
            elem.style.display = 'none';
            document.querySelectorAll('online boton')[i].style.display = 'none';
        });
    }; 
 
}, false);

JUMASOL · #9 (**permalink**) 19/02/2017, 04:00

Gracias mpozo, ya voy viendo.