2017-10-31 1 views
-2
<html> 

<head> 
    <title> OLL </title> 
</head> 

<body> 
    <script type=text/javascript> 
    //Loads Images 
    //img.src = 'path/to/image.jpg'; 

    var img = new Image(); 
    var div = document.getElementById('foo'); 

    img.onload = function() { 
     div.appendChild(img); 
    }; 

    //img.src = 'path/to/image.jpg'; 
    img.src = 'bone.jpg'; 
    </script> 
</body> 

</html> 

を「プロパティを読み取ることができません』私はクロームでそれを開くたびに、それはbone.jpg bone.jpgは、htmlファイルと同じフォルダにある表示されません取得しておきます私は、コンソールを開いたときに、それが示し私はImage.img.onloadエラーでヌルのは、appendChild 『

は、私はできるだけ簡素化ようにあなたの応答を作成してくださいJavaScriptに新たなんだImage.img.onloadでヌルのプロパティ「のappendChild」を読み取ることができません。

+1

どこマークアップのid 'foo'と' div'のですか? – Abhitalks

+0

JavaScriptを初めてお使いの方は、通常の無料または有料のオンラインコースや書籍を手に入れることができます。照会する前に要素が存在する必要があることを強調する必要がある詳細については、[** getElementById **](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)を参照してください。 – Nope

答えて

2

あなたがに追加するマークアップのid fooとのdivを必要とする:

<html> 
<head> 
    <title> OLL </title> 
</head> 
<body> 
    <div id="foo"></div> 

    <script type=text/javascript> 
     var img = new Image(); 
     var div = document.getElementById('foo'); 
     img.onload = function() { div.appendChild(img); }; 
     img.src = 'bone.jpg'; 
    </script> 
</body> 
</html> 
+0

これは素晴らしく、すべてですが、やっと動作するようになりましたが、divタグを1つだけ使用して複数の写真を同時に使用することはありますか? –

+1

@dope_asaurusこの回答があなたの問題を解決した場合は、それをそのようにマークしてください。あなたが解決しようとしているそれ以上の問題や問題は、別の質問で尋ねるべきです。 – Nope

1

あなたのHTMLマークアップにID foo<div>を追加する必要があり、そうでなければ、あなたのスクリプトは、要素を見つけることができません完全なコードで

[...] 
<body> 

<div id="foo"></div> 

<script type=text/javascript> 
[...] 

:そのようなIDとnullを返す、に付加することができないためにどの

<html> 
 
<head> 
 
    <title> OLL </title> 
 
</head> 
 
<body> 
 

 
    <div id="foo"></div> 
 

 
    <script type=text/javascript> 
 

 
    var img = new Image(); 
 
    var div = document.getElementById('foo'); 
 
    img.onload = function() { 
 
     div.appendChild(img); 
 
    }; 
 
    img.src = 'bone.jpg'; 
 

 

 
    </script> 
 
</body> 
 
</html>

関連する問題