forloopを使用してhtml domでdivを乗算しようとしています

bugfix> javascript > 投稿 2020-08-22 17:08

こんにちは、私はforloop内で複数のdivを作成しようとしていますが、結果はたった1 divです。私は何を間違えていますか？

コード：

for (var i = 0; i < $hubbe.colors.length; i++) {
$hubbe.pallet = document.createElement('DIV');
$hubbe.pallet.setAttribute('class', 'pallet');
$hubbe.toolbarLeft.appendChild($hubbe.pallet);
$hubbe.pallet.style.backgroundColor = $hubbe.colors[i];
Object.assign($hubbe.pallet.style, {
width: '40px',
height: '40px',
border: '2px solid #2c3e50',
margin: '20px 0 0 5px',
disaply: 'block',
cursor: 'pointer',
});
}

javascript

html5

for-loop

回答 1 件

あなたが私に言ったことに基づいて、これはあなたの問題を解決すると思います。 $hubbe.pallet を変更します残りのコードも同様に機能するように配列に入れます：

$hubbe.pallet = []; //declares the array
for (var i = 0; i < $hubbe.colors.length; i++) {
    var temp = document.createElement('DIV'); //create temp variable to work with
    temp.setAttribute('class', 'pallet');
    temp.style.backgroundColor = $hubbe.colors[i];
    Object.assign(temp.style, {
        width: '40px',
        height: '40px',
        border: '2px solid #2c3e50',
        margin: '20px 0 0 5px',
        disaply: 'block',
        cursor: 'pointer',
    });
    $hubbe.toolbarLeft.appendChild(temp);
    $hubbe.pallet[i] = temp; //adds the object to the array
}