मेरे पास जेएस में छवियों की एक सरणी है जिसे मुझे HTML में शामिल करने की आवश्यकता है। यह मेरी सरणी और जे एस कोड है:

// Data for the "HTML Images" Page

var images = [
    {caption: "Red Slate Mountain", alt: "Mountain", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Red_Slate_Mountain_1.jpg/320px-Red_Slate_Mountain_1.jpg"},
    {caption: "St. Petersburg River", alt: "River", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Saint-petersburg-river-march-24-2016.jpg/320px-Saint-petersburg-river-march-24-2016.jpg"},
    {caption: "Lybian Desert", alt: "Desert", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Libyan_Desert_-_2006.jpg/320px-Libyan_Desert_-_2006.jpg"},
    {caption: "Azerbaijan Forest", alt: "Forest", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Azerbaijan_forest_3.JPG/320px-Azerbaijan_forest_3.JPG"},
    {caption: "Indonesian Jungle", alt: "Jungle", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Indonesian_jungle3%2C_Zoo_Prague.jpg/320px-Indonesian_jungle3%2C_Zoo_Prague.jpg"}
];

window.onload = function(){
    var figure = "<figure>";
    for(var i = 0; i <= images.length; i++){
        figure += '<img src="'+ images[i].url + '" ' + 'alt="' + images[i].alt + '">' 
        + '<figcaption>' + images[i].caption + "</figcaption>"   
    }figure += "</figure>";

    var myContainer = document.querySelector("#image").innerHTML = figure;
}

और यह HTML कंटेनर है:

<section class="main center">

            <h2>HTML Images</h2>
            <a href="https://ict.senecacollege.ca/" target="_blank">
                <img src="assignment3/img/ict.png">
            </a>
            <h2>Scenes</h2>
            <div id="image"></div>

    </section>

लेकिन पेज खाली है। मैं मान रहा हूं कि यह मुद्दा मेरा संयोजन है लेकिन मुझे इसमें कोई त्रुटि नहीं मिली।

1
oo92 2 अप्रैल 2018, 04:28

3 जवाब

सबसे बढ़िया उत्तर

सरणी 'छवियों' में 5 आइटम हैं। आपका लूप 0 से शुरू होता है और 5 तक जाता है, जिसमें 6 पुनरावृत्तियां शामिल हैं।

आप चाहते हैं i < images.length

आप वर्तमान में undefined के .url को एक्सेस कर रहे हैं (एक इंडेक्स के लिए डिफ़ॉल्ट मान जो मौजूद नहीं है)

3
Daniel Thompson 2 अप्रैल 2018, 01:55

आप सरणी को कम भी कर सकते हैं। डोरी:

const figure = images.reduce(
  (all,image)=>
    all + '<img src="'+ image.url + '" ' + 'alt="' + image.alt + '">' 
    + '<figcaption>' + image.caption + "</figcaption>",
  "<figure>"//initial value
) + "</figure>";
1
HMR 2 अप्रैल 2018, 04:32

आप बराबर चिह्न के कारण आवश्यकता से अधिक बार पुनरावृति कर रहे हैं और यह त्रुटि उत्पन्न कर रहा है। लंबाई 6 की एक सरणी का अंतिम तत्व 5 होता है।

1
Ian Middelkamp 2 अप्रैल 2018, 01:58