jQuery returning r.fn.init()] strange error

Question

So I was doing a school project and I came across a really weird mistake at jQuery.

I repeated basically the same programming step and from the third time the code does not work.

I tried to identify what was returned on the console and received this strange code.

I can’t really explain it, maybe watching a demo will make it better.

Left select enables right select and so on. However, select Front does not enable Chapter and Chapter does not enable Typex.

Demo

Answer 1

Errors are basically of inattention.

Some problems in the code:

• You added # to the id in Chapter and Typoex. At the time of calling the object, it would obviously not locate.

• Still in Chapter, you didn’t use accent, but you selected the object as if you had put.

• You tried to locate $('#typeEx') with tiny t, which also won’t work.

The object you see on the return, when executing a select jQuery for Chapter and Typoex indicate that it was not located, only.

Normalize as below and everything will work well.

<select id='Capítulo' size='3' disabled>
    <option>Capitulo 1</option>
    <option>Capitulo 2</option>
    <option>Capitulo 3</option>
</select>

<select id='TipoEx' size='3' disabled>
    <option>Revisando</option>
    <option>Propostos</option>
    <option>Complementares</option>
</select>

$('#Capítulo').click(function() {
    capitulo = $(this).find(':selected').text();
    $('#navigation a.capitulo').text(capitulo);
    if (capitulo != '') {
        $('#navigation a:eq(3)').addClass('active');
        $('#TipoEx').prop('disabled', false);
    }
});

$('#TipoEx').click(function() {
    tipoEx = $(this).find(':selected').text();
    $('#navigation a.tipoEx').text(tipoEx);
    if (capitulo != '') {
        $('#Exercícios').show();
    }
});

});