下記のクラスを作成したのですが、if文の外側で宣言したthumbnailIMGにif文の内側で代入したいのですが値が代入されません。
javascriptでコードを書き始めて間もないため、Googleでブロックスコープに付いて調べたのですが、ブロックの外側で宣言された変数に対しては内側で使用可能なはずです。
下記は期待通りにちゃんと動作します。
let el = 'Moji'
if(el) {
el = '文字';
console.log(el);
}
すいません。原因が分からないです。
コード
class thumbnail {
constructor(){
this.DOM = {}
this.DOM.inputURL = document.querySelectorAll('.dlcard__url > input');
this.DOM.dlcardWrap = document.querySelector(".dlcardWrap");
this._addEvent();
}
_putThumbnail() {
this.DOM.dlcardIMGs = document.querySelectorAll('.dlcard__thumbnail > img');
this.DOM.dlcardIMGs.forEach((el) => {
el.addEventListener();
});
}
_addEvent() {
this.params = {}
this.DOM.dlcardWrap.addEventListener("blur",
function (elm) {
const input = elm.target;
if (input.parentElement.classList.contains("dlcard__url")) {
const url = new URL(input.value)
let pairs = url.search.substring(1).split('&');
let params = {}
for(let pair of pairs) {
let kv = pair.split('=');
params[kv[0]] = kv[1];
}
let videoID = params.v;
let dlcard = input.closest('.dlcard');
let thumbnailIMG = dlcard.childNodes[3].childNodes[1].src;
if(videoID) {
let thumbnailURL = `https://img.youtube.com/vi/${videoID}/maxresdefault.jpg`;
thumbnailIMG = thumbnailURL;
}else{
console.log('通った')
}
}
}, true);
}
}
new thumbnail();
vscodeでも使用されないと出る。
追記
変更前
let thumbnailIMG = dlcard.childNodes[3].childNodes[1].src;
変更後
let thumbnailIMG = dlcard.childNodes[3].childNodes[1];
if文内のthumbnailIMG.src
とする事で参照され期待する動作になりました。
ただsrc
を付ける箇所で動作が変わる意味がよく分からないです。Pythonだったら問題なく動作しそうだと思ったので難しいですね。
thumbnailIMG
を参照してるつもりなのですが、参照されてないと出ます。値の確認はconsole.log
で行いました。console.log(thumbnailIMG)
をif文内で使用すれば参照されるという事でしょうか?