进度条上的Javascript引用错误，请帮忙

Question

我编写了一些代码来制作进度条。但是当我运行第 30 行代码时出现错误:

• 引用错误:einfuegen2 未定义
• zielort.appendChild(einfuegen2)

我真的很困惑我应该做什么。谁能帮我解决我的问题吗？

JS 代码:

function progress(){

        var min = 0;
        var max = 10;
        var x = Math.floor(Math.random() * (max - min)) + min;


        for(var i = 0; i < x; i++){


            var einfuegen = document.createElement('div');
            einfuegen.className = 'statusbar';

            document.body.appendChild(einfuegen);   

            var einfuegen2 = document.createElement('img');
            einfuegen2.id = 'bild';
            einfuegen2.name = 'bild';
            einfuegen2.src = 'project_status.gif';


            var zielort = document.getElementsByClassName('statusbar');
            zielort.appendChild(einfuegen2);

        }       
}

HTML 代码:

<input name="Progress" type="button" onclick="progress()" value="Progress!" />
<div class="statusbar">
    <img id="bild" name="bild" src="project_status.gif"/>
</div>

Answer 1

getElementsByClassName 返回元素数组。试试这个。

var zielort = document.getElementsByClassName('statusbar')[0];
zielort.appendChild(einfuegen2);