javascript - CSS、Javascript、HTML を使用した InfoCard/Info Box の作成

Question

私は、名前と写真だけが自動的にロードされる一連の 8 つのボックスを作成する任務を負っています。カーソルを合わせると x が表示され、クリックしてボックスを削除できます。また、新しいボックスを追加できる必要があります。現在、名前と写真の URL を取得するための 2 つのフィールドを設定しています。

いくつかの問題があります。枠線付きのボックスを作成できますが、テキストまたは名前を追加するとボックスが消えて、名前だけが残ります。また、画像をページに直接インポートすることはできますが、名前を追加することはできず、ボックスを作成することもできません。

これを達成するために誰かが私を正しい方向に向けることができますか?

ここに私のHTMLがあります

ここの最初の部分では、写真を取り込みます。写真だけです。2 番目の部分は、ロード時にボックスを作成し、名前と写真を持っているはずです。現在、私は img 行を取り出し、ボックスに名前を取得しようとしています。その後、画像に戻ります。

  <script type="text/javascript">
    document.getElementById('btn').onclick = function() {
        var val = document.getElementById('imagename').value,
            src = "" + val +'.png',
            img = document.createElement('img');

        img.src = src;
        document.body.appendChild(img);
    };
</script>

  <hr />
<div class="boxed">
    <name>William Finley </name>
</div>

そして、ここに私のCSSがあります

.boxed{
border: 3px black;
width:150px;
}

.name
{    
font-weight:bold;    
position:relative;    
z-index:100; /*greater than details, to still appear in card*/
}
.card img
{
width:70px;    
float:right;
margin-top:-1em;
}