Выводятся все последние данные из объекта, а не по порядку

Выводятся только последние данные из объекта, а не по порядку.

js код

let descBlockImg,
    descBlockHeading,
    descBlockPar;

for (let i = 1; i <= 6; i++) {
    let descBlock = document.createElement('div');
    descBlock.classList.add('desc__content-block');
    descBlock[i];
    descContent.append(descBlock);

    function addElementsToDescBlock(el, tag, className) {
        el = document.createElement(tag);
        el.classList.add(className);
        descBlock.append(el);
    }

    addElementsToDescBlock(descBlockImg, 'img', 'desc__content-block-img');
    addElementsToDescBlock(descBlockHeading, 'div', 'desc__content-block-heading');
    addElementsToDescBlock(descBlockPar, 'p', 'desc__content-block-paragraph');
}

let allImgOfDescBlock = document.querySelectorAll('.desc__content-block-img'),
    allHeadingOfDescBlock = document.querySelectorAll('.desc__content-block-heading'),
    allParOfDescBlock = document.querySelectorAll('.desc__content-block-paragraph');

let descBlocksInfo = [
    { heading: 'Flash storage', img: 'img/desc1.png', paragraph: `New! Turbocharge flash access with NVME-oF for accelerated performance and lower latency. Deploy affordable, industry-leading flash backed by guarantees.` },
    { heading: 'Software-defined storage', img: 'img/desc2.png', paragraph: `Manage data growth and enable multicloud initiatives with file, block and object solutions to modernize your infrastructure and support next-generation applications.` },
    { heading: 'Data protection software', img: 'img/desc3.png', paragraph: `Protect your critical business data with an integrated approach to backup and disaster recovery featuring quick installation, easy management and rapid data recovery.` },
    { heading: 'Hybrid storage arrays', img: 'img/desc4.png', paragraph: `Control costs with an optimized mix of storage media at an affordable price. With nearly unlimited hybrid configuration options, you can tailor a system to your specific needs.` },
    { heading: 'Storage area networks ', img: 'img/desc5.png', paragraph: `Capitalize on enterprise-wide data sharing and collaboration with intelligent SAN switches, directors and routers to connect servers and storage systems.` },
    { heading: 'Tape storage', img: 'img/desc6.png', paragraph: `Improve data economics with tape storage solutions from the global market leader, including drives, autoloaders, libraries, virtual tape systems and IBM Spectrum Archive software, which makes tape as easy to use as disk.` },
];

function addInfoToBlock() {
    descBlocksInfo.forEach(info => {
        allImgOfDescBlock.forEach(images => {
            images.src = info.img;
        });
        allHeadingOfDescBlock.forEach(heading => {
            heading.innerHTML = info.heading;
        });
        allParOfDescBlock.forEach(par => {
            par.innerHTML = info.paragraph;
        });
    });
};

addInfoToBlock();

HTML код

<section class="desc">
        <div class="container">
            <div class="desc__content">
                <div class="desc__content-heading heading">
                    <h2>Accelerate workloads. Capitalize on hybrid cloud. Protect your data from all threats.</h2>
                    <p>
                        Your business is driven by data, and harnessing the power of your data is critical to your competitive advantage. IBM has everything you need to gain continuous insight, meet real-time demands, and drive innovation and growth.
                    </p>
                </div>
            </div>
        </div>
    </section>

Ответы (1 шт):

Автор решения: FRICHER Msd

Я решил данную проблему, сделав все это в цикле

let descBlocksInfo = [
    { heading: 'Flash storage', img: 'img/desc1.png', paragraph: `New! Turbocharge flash access with NVME-oF for accelerated performance and lower latency. Deploy affordable, industry-leading flash backed by guarantees.` },
    { heading: 'Software-defined storage', img: 'img/desc2.png', paragraph: `Manage data growth and enable multicloud initiatives with file, block and object solutions to modernize your infrastructure and support next-generation applications.` },
    { heading: 'Data protection software', img: 'img/desc3.png', paragraph: `Protect your critical business data with an integrated approach to backup and disaster recovery featuring quick installation, easy management and rapid data recovery.` },
    { heading: 'Hybrid storage arrays', img: 'img/desc4.png', paragraph: `Control costs with an optimized mix of storage media at an affordable price. With nearly unlimited hybrid configuration options, you can tailor a system to your specific needs.` },
    { heading: 'Storage area networks ', img: 'img/desc5.png', paragraph: `Capitalize on enterprise-wide data sharing and collaboration with intelligent SAN switches, directors and routers to connect servers and storage systems.` },
    { heading: 'Tape storage', img: 'img/desc6.png', paragraph: `Improve data economics with tape storage solutions from the global market leader, including drives, autoloaders, libraries, virtual tape systems and IBM Spectrum Archive software, which makes tape as easy to use as disk.` },
];

for (let i = 0; i <= 6; i++) {
    let descBlock = `
    <div class="desc__content-block">
        <img src="${descBlocksInfo[i].img}" />    
        <div class="desc__content-block-heading">${descBlocksInfo[i].heading}</div>
        <p>
            ${descBlocksInfo[i].paragraph}
        </p>
    </div>
`;
    descBlock[i];

    descContent.innerHTML += descBlock;
}
→ Ссылка