0

He hecho este código pero el inspector de elementos me dice que boton esta si definir, el error exacto es este:

Uncaught typeerror: Cannot read property onclick of undefined.

La cuestión es que cuando pego el código en el inspector de elementos funciona pero cuando lo guardo en el html no, es como si la variable boton perdiera su valor, de hecho lo verifico en el inspector de elementos y cuando lo carga de la web me da error, pero si lo hago paso a paso funciona. ¿Alguien sabe por qué?

Gracias por adelantado, a continuación os dejo el código:

var boton = document.getElementsByClassName('ShowMore')[0];
console.log(boton);
if (boton!=false){
console.log("existe el boton");
boton.onclick("jq('#jqSectionText').toggle();jq(this).toggleClass('ShowLess'); jq(this).toggleClass('ShowMore');jq(this).find('.fa-chevron').toggleClass('fa-chevron-up fa-chevron-down');");
1
  • Comprueba la línea ´if(boton!=false){´, tienes sin cerrar el if. Quizá sea ese el fallo Commented el 25 feb. 2017 a las 8:49

2 respuestas 2

1

Primero, la comprobación sobre la existencia de un elemento con clase 'ShowMore' debiera ser:

var boton = document.getElementsByClassName('ShowMore')[0];
console.log(boton);
if (boton !== undefined){

}

Segundo, veo que ya estás ejecutando jQuery, pero en vez de pasarle una función que hace cosas al listener onClick, le pasas un texto gigante que no hace nada. Creo que lo que quieres hacer se escribiría como:

var boton = jq('.ShowMore').first();
console.log(boton);
if (boton !== undefined){
  console.log("existe el boton");
  boton.on('click',function() {
    jq('#jqSectionText').toggle();
    jq(this).toggleClass('ShowLess'); 
    jq(this).toggleClass('ShowMore');
    jq(this).find('.fa-chevron').toggleClass('fa-chevron-up fa-chevron-down');
  });

}

Me parece que toggleClass está deprecated en jQuery 3, pero no tengo idea qué versión estarás usando.

Saludos, espero te sirva.

3
  • No sería mucho mejor hacer un if(typeof(boton) !== 'undefined')?
    – Jorius
    Commented el 25 feb. 2017 a las 14:12
  • En este caso sería como lo mismo. Yo uso typeof cuando pruebo variables no declaradas
    – ffflabs
    Commented el 25 feb. 2017 a las 14:55
  • Muchas gracias a todos y a ti en especial, creo que el problema es ese y usaré tu solución. Es increíble todo lo que se aprende aquí, una vez más, muchas gracias Commented el 25 feb. 2017 a las 18:06
0

¿Ejecutas ese código en .ready de jQuery o DOMContentLoaded de JavaScript? Esto puede macar la diferencia ya que, si el script se ejecuta antes que el DOM sea cargado, boton valdrá undefined porque no hay un DOM al cual consultar.

$(document).on('ready', function () {
  // tu código aquí
});

o

document.addEventListener('DOMContentLoaded', function () {
  // tu código aquí
});

También estás cometiendo un error al comprobar si la variable boton tiene la referencia esperada. Cuando las funciones selectoras como getElementById, getElementsByClassName, getElementsByTagName, querySelector, etc., no encuentran el elemento de acuerdo al selector, devuelven un NodeList vacío o si es una función selectora única, null.

En tu caso, la expresión:

document.getElementsByClassName('ShowMore')

Devuelve un NodeList que puede estar vacío si no se ha encontrado el elemento o si el DOM aún no ha cargado. Si esto ocurre y seleccionas algún índice del NodeList ([0]), obtendrás undefined no false (en otros lenguajes inclusive se lanza alguna excepción/error).

Tu código final debería verse de la siguiente manera. Como estás usando jQuery, he escrito tu código usando dicha librería:

$(document).on('ready', function () {
  $('.ShowMore:eq(0)').on('click', function () {
    $('#jqSectionText').toggle();
    $(this).toggleClass('ShowLess');
    $(this).toggleClass('ShowMore');
    $(this)
      .find('.fa-chevron')
      .toggleClass('fa-chevron-up fa-chevron-down');
  });
});
2
  • 1
    Ojo, él quiere aplicar el evento solo al primer botó
    – ffflabs
    Commented el 25 feb. 2017 a las 14:04
  • Ups, se me pasó. Gracias por indicarlo.
    – gugadev
    Commented el 25 feb. 2017 a las 14:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.