Problems with the value of a variable

Question

Problems with the value of a variable

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I've done this code but the element inspector tells me that boton is set, the exact error is this:

Uncaught typeerror: Can not read property onclick of undefined.

The point is that when I paste the code in the element inspector it works but when I save it in the html it is not as if the variable boton loses its value, in fact I check it in the element inspector and when I loading the web gives me error, but if I do it step by step it works. Does anyone know why?

Thanks in advance, then I leave the code:

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');");

javascript variables

asked by bruno celaya 25.02.2017 в 09:32

source

2 answers

Show Post in Draft status with permalinks /% postname% / in WordPress Error deploy App Laravel 5 in Heroku

score 0 · Answer 1

First, the check on the existence of a class item 'ShowMore' should be:

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

}

Second, I see that you are already running jQuery, but instead of passing a function that does things to the listener onClick, you pass a giant text that does nothing. I think what you want to do would be written as:

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

}

I think that toggleClass is deprecated in jQuery 3, but I have no idea which version you will be using.

Greetings, I hope it serves you.

score 0 · Answer 2

Do you execute that code in .ready of jQuery or DOMContentLoaded of JavaScript? This can make the difference because, if the script runs before the DOM is loaded , boton will be undefined because there is no DOM to consult.

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

or

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

You are also making an error when checking if the variable boton has the expected reference. When the selection functions such as getElementById , getElementsByClassName , getElementsByTagName , querySelector , etc., do not find the element according to the selector, they return an empty NodeList or if it is a unique selector function, null .

In your case, the expression:

document.getElementsByClassName('ShowMore')

Returns a NodeList that may be empty if the element was not found or if the DOM has not yet loaded . If this happens and you select some NodeList index ( [0] ), you will get undefined no false (in other languages even some exception / error is thrown).

Your final code should look like this. Since you are using jQuery, I have written your code using this library:

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