

下記のクラスを作成したのですが、if文の外側で宣言したthumbnailIMGにif文の内側で代入したいのですが値が代入されません。

javascriptでコードを書き始めて間もないため、Googleでブロックスコープに付いて調べたのですが、ブロックの外側で宣言された変数に対しては内側で使用可能なはずです。

下記は期待通りにちゃんと動作します。

[code]

    let el = 'Moji'  
    
    if(el) {
    el = '文字';
    console.log(el);  
    }
    
[/code]

すいません。原因が分からないです。

**コード**

[code]

    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();
    
[/code]

**vscodeでも使用されないと出る。**

[![画像の説明をここに入力](https://i.stack.imgur.com/zecqa.png)](https://i.stack.imgur.com/zecqa.png)

**追記**

変更前  
`let thumbnailIMG = dlcard.childNodes[3].childNodes[1].src;`

変更後  
`let thumbnailIMG = dlcard.childNodes[3].childNodes[1];`

if文内の`thumbnailIMG.src`とする事で参照され期待する動作になりました。  
ただ`src`を付ける箇所で動作が変わる意味がよく分からないです。Pythonだったら問題なく動作しそうだと思ったので難しいですね。


CC BY-SA 4.0
2020-11-13T01:48:18.730
71908
2020-11-29T17:01:51.293
2020-11-13T02:30:36.100
22565
22565
question
javascript
if文の外側に宣言した変数をif文の内側で使用出来ない。


問題はスコープではなく、this.DOM.dlcardWrap =
document.querySelector（を記述したクラスのコンストラクターで、成功したかどうかをチェックせずに、要素のクエリセレクターと等しい変数を宣言していることです。
".dlcardWrap"）;

コンストラクターは、クラスが作成された直後のように見える新しいクラスを作成したときに呼び出されますが、ここにはhtmlが表示されていません。

HTMLを作成する前にクラスを作成すると、クエリセレクターがまったく機能しなくなります。クラス宣言をページ本文のonloadイベントに配置するか、すべてのJavaScriptをすべてのHTMLコードの最後に移動する必要があります。


CC BY-SA 4.0
2020-11-29T17:01:51.293
72277
2020-11-29T17:01:51.293
42929
71908
answer