0

私のコードが現在失敗していることを除いて、あなたはできると確信しています。

私が短い小さなJavascriptプログラムに指示しているのは、配列からコードを選択し (今のところ、テスト 1 の 0 がプリセットされています)、そのコードを使用してYoutubeそのビデオ コードのサムネイルを取得し、半自動のYoutubeギャラリーです。つまり、私が入る必要はなく、すべての面倒な作業を手動で行う必要はありません。ビデオに移動して、コードを配列にコピーするだけですが、画像の src を次のように変更しようとすると、 URL（変数）を介してdocument.getelementblahblah.src=myVar、
コンソールエラーが発生します：Uncaught TypeError: Cannot set property 'src' of null

これが私のコードです：

<!Doctype HTML>
<html>
<head>
<script>
var thumbPrefix = "http://img.youtube.com/vi/";
var thumbSuffix = "/mqdefault.jpg";
var vidCode = ['fL01KMMi5_M','6akcfoJ05Aw','lPpot4OCnQs'];
var thumb1Url = thumbPrefix + vidCode[0] + thumbSuffix;
document.write(thumb1Url); //this is just to visualize url
document.getElementById('pie').src=thumb1Url;
</script>
</head>
<body>
<img src="" id="pie" />
</body>
</html>

そして、 setAttribute メソッドも試してみたので...

4

4 に答える 4

4

「コンソール エラーが表示されます: Uncaught TypeError: Cannot set property 'src' of null」

これは、ブラウザが問題の要素を解析する前にスクリプトが実行されているため、 id を持つ要素が見つからなかったため、document.getElementById('pie')が返されたためです。null'pie'

ブラウザーは、スクリプト ブロックに遭遇すると、コードをドキュメント内で上から下に実行します。

スクリプト ブロックをドキュメントの末尾 (終了タグの直前</body>など) に移動するか、コードを onload という関数内に配置します。そうすれば、画像要素が解析され、JS から操作できるようになります。

(変数に設定しようとしているという事実.srcはまったく問題ではありません。)

于 2012-10-30T06:34:10.710 に答える
0

pieソースを設定しようとしている時点では、オブジェクト' 'はありません。スクリプトは、ブラウザで検出されたときに解析および実行されます。あなたのページでは、スクリプトが最初に来て、画像のマークアップが後で来ます。次のように修正できます

<!Doctype HTML>
<html>
<head>
<script>
function setImage(){
    var thumbPrefix = "http://img.youtube.com/vi/";
    var thumbSuffix = "/mqdefault.jpg";
    var vidCode = ['fL01KMMi5_M','6akcfoJ05Aw','lPpot4OCnQs'];
    var thumb1Url = thumbPrefix + vidCode[0] + thumbSuffix;
    //document.write(thumb1Url); THIS IS CAUSING DOCUMENT TO CLEAR OF ALL MARKUP :(
    document.getElementById('pie').src=thumb1Url;
}
</script>
</head>
<body onLoad='setImage'>
<img src="" id="pie" />
</body>
</html>

これdocument.write(thumb1Url)も問題の原因です。Console.log代わりにデバッグに使用してみてください。

于 2012-10-30T06:34:31.117 に答える
0

スクリプトはドキュメントの先頭にあり、コンテンツが読み込まれる前に実行されるため、失敗します。このように体に入れるとうまくいきます。

<body>

    <img src="" id="pie" />
    <script>
        var thumbPrefix = "http://img.youtube.com/vi/";
        var thumbSuffix = "/mqdefault.jpg";
        var vidCode = ['fL01KMMi5_M','6akcfoJ05Aw','lPpot4OCnQs'];
        var thumb1Url = thumbPrefix + vidCode[0] + thumbSuffix;
        document.write(thumb1Url); //this is just to visualize url
        document.getElementById('pie').src=thumb1Url;
    </script>
</body>
于 2012-10-30T06:35:31.030 に答える
0

これが機能しない理由は、コードの実行時に、'pie' 要素がまだ解析されておらず、DOM ツリーに挿入されていないためです。

探しているDOM要素が完全に解析されるまでコードの実行を本質的に遅らせる必要があるため、その「script」要素を「body」終了タグの直前に置くと問題が解決します。

または、DOM ツリーが解析されたときに起動するように eventHandler をバインドすることもできます。すべてのクロスブラウザーの問題を克服するために、ライブラリを使用してこれを行うことを強くお勧めします。jQueryは一般的なソリューションですが、ページに巨大なライブラリを含めたくない場合は、このライブラリが役立ちます。

于 2012-10-30T06:41:05.023 に答える