HTML：.jsファイルからブートストラップカードを自動的に作成する方法

debugcn 投稿 Dev

Xonnorel

.jsファイルの情報を使用してカードを自動的に作成するためのヘルプが必要です。

.jsファイルの例：

'use strict';
var tasks = [
    {
        "title": "home",
        "color": "blue",
    },
    {
        "title": "city",
        "color": "green",
    },

この情報を使用して、プログラムで2枚のブートストラップカードを自動的に作成したいと思います。

私はこのコードを書きましたが、何もしないようです：

<script>
    let createTaskCard = (task) => {
        let card = document.createElement('div');
        card.className = 'card shadow cursor-pointer';

        let cardBody = document.createElement('div');
        cardBody.className = 'card-body';

        let title = document.createElement('h5');
        title.innerText = task.title;
        title.className = 'card-title';

        let color = document.createElement('div');
        color.innerText = task.color;
        color.className = 'card-color';

        cardBody.appendChild(title);
        cardBody.appendChild(color);
        card.appendChild(cardBody);
        cardContainer.appendChild(card);
    }

    let initListOfTasks = () => {
        if (cardContainer) {
            document.getElementById('card-container').replaceWith(cardContainer);
            return;
        }

        cardContainer = document.getElementById('card-container');
        tasks.forEach((task) => {
            createTaskCard(task);
        });
    };   
</script>

Tushar Walzade

あなたのコードは機能しているようです！idを使用してHTML要素を作成し、card-containerメソッドを呼び出すだけinitListOfTasks()です。これがブートストラップと一緒の実装です-

var tasks = [{
        "title": "home",
        "color": "blue",
    },
    {
        "title": "city",
        "color": "green",
    }
];

let cardContainer;

let createTaskCard = (task) => {

    let card = document.createElement('div');
    card.className = 'card shadow cursor-pointer';

    let cardBody = document.createElement('div');
    cardBody.className = 'card-body';

    let title = document.createElement('h5');
    title.innerText = task.title;
    title.className = 'card-title';

    let color = document.createElement('div');
    color.innerText = task.color;
    color.className = 'card-color';


    cardBody.appendChild(title);
    cardBody.appendChild(color);
    card.appendChild(cardBody);
    cardContainer.appendChild(card);

}

let initListOfTasks = () => {
    if (cardContainer) {
        document.getElementById('card-container').replaceWith(cardContainer);
        return;
    }

    cardContainer = document.getElementById('card-container');
    tasks.forEach((task) => {
        createTaskCard(task);
    });
};

initListOfTasks();

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="card-container"></div>