0

私は HTML と JavaScript を学んでおり、最初に for ループを使用して 4 つの画像を表示する単純な Web サイトを作成しています。ただし、ブラウザで表示すると、画像の名前しか表示されず、画像自体は表示されません。これが私のコードです：

<html xmlns="http://www.w3.org/1999/xhtml" >
<div id = "products" align = "center">

 <script>

  function showImages() {
    var productImg = new Array("a.png", "b.png", "c.png","d.png");
    var x = " ";

     for (var i = 0; i < productImg.length; i++) {

        var image = productImg[i];
        x += image;

    }

    var getImg = document.getElementById('products').innerHTML = x;
}



  </script>
  </div>
  <body onload = "showImages()">

   </body>
   </html>

ここで何が欠けていますか？前もって感謝します。

4

2 に答える 2

1

これはうまくいくはずです。あなたの画像にはimgタグが必要です:)そして、何が欠けているのかという質問については、HTMLでほとんどすべてに答えなければなりません。

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <script>
        function showImages() {
            var productImg = ["a.png", "b.png", "c.png","d.png"];
            var x = "";
            for (var i = 0; i < productImg.length; i++) {
                var image = productImg[i];
                x += '<img src="' + image + '"/>';
            }
            var getImg = document.getElementById('products').innerHTML = x;
        }
        </script>
    </head>
    <body onload="showImages()">
    <div id="products" align="center"></div>
    </body>
</html>
于 2013-10-23T22:11:25.840 に答える
0

Joni の答えはほぼ正しいですが、学習している間は、HTML は「単なる」構造化されたテキスト ドキュメントであり、長い道のりになることを覚えておいてください。コンテンツを動的に作成する準備ができたら、DOM を使用して多くのことを学習する準備をしてください。しかし、すでにいくつかのコードを知っているように見えるので、それで戦いの半分は終わりです。;)

JS でこれを行う方法を理解するために、探しているのはImageオブジェクトです。次のように記述して、新しい Image を作成しますvar myPicture = new Image();。現状では、これはドキュメントにはまだ存在せず、ソース (リソースへのパス) もありませんが、新しい画像への参照があり、それを使用して操作できます。

src次のように、属性を変更してソースを指定しますmyPicture.src="a.png";。ただし、そのイメージをロードする操作は非同期であることを覚えておく必要があります (これは非常に多くのことに当てはまります) 。つまり、ドキュメントに画像を追加しても、画像が読み込まれるまで何も表示されません。画像は、これを理解するための出発点として適しています。コンソール (Chrome の開発者ツール) でこれらのコマンドを試してみて、どのような違いがあるかを確認してください。

var myPicture = new Image();
myPicture.src = 'a.png';
document.body.appendChild(myPicture); // may or may not show the image, depending on how long it takes to load, but should be almost instant on a localhost or file

var myEmptyPicture = new Image();
document.body.appendChild(myEmptyPicture); // you will see the empty image tag in the document
myEmptyPicture.onload = function(){
  console.log('I have finished loading the picture!')
};
myEmptyPicture.src = 'b.png'; // you kept the reference to the image, so you can change its src attribute even while it is in the document - this is important for more advanced stuff, and it should log a message to your console

// last one, this will insert itself into the document once it has loaded
myAutomaticPicture = new Image();
myAutomaticPicture.onload = function(){
  console.log('picture loaded, inserting into document');
  document.body.appendChild(myAutomaticPicture); // should see it in the document now
}
myAutomaticPicture.src = 'c.png';

onload 属性は、値として関数を取るという点で特別です。この関数は、画像の読み込みが完了すると呼び出されます。

試すこと、DOM に既にある要素の src 属性を変更する、または document.createElement メソッドで他の要素を作成して追加する (例: var heading = document.createElement('h1'); heading.innerHTML='hello'; document.appendChild(heading);)。

これらすべてがどのように組み合わされているかを見始めると、とても楽しいです...

于 2013-10-23T23:03:39.560 に答える