Uncaught TypeError

Question

Why am I getting a reference error for the width being undefined? Click the button in this code to get the error. I have no idea why it's happening.

https://code.sololearn.com/W7StKWhLd5dH

Answer 1

Because you get a JQuery object in your 'bar' variable, not directly a DOM element:

function fillBar() {
var bar = $("#bar1");
var w = 0;
var x = setInterval(fill, 10);
function fill() {
if (w >= 100) {
clearInterval(x);
} else {
w += 0.2;
// bar.style.width = w + '%';
bar.css('width',w + '%');
}
}
}

The other fix alternative will be to not use JQuery at all:

function fillBar() {
// var bar = $("#bar1");
var bar = document.querySelector("#bar1");
var w = 0;
var x = setInterval(fill, 10);
function fill() {
if (w >= 100) {
clearInterval(x);
} else {
w += 0.2;
bar.style.width = w + '%';
}
}
}

Answer 2

Ahhh, see, I'm still learning JQuery. I forgot about this detail! Thank you for the answer - I appreciate it