Javascriptを使用してdivに画像を配置する

Question

私はバカラゲームを構築しようとしており、li - リスト項目に入れ子になっているdivに各カードの画像を配置したいと考えています。 divに空のイメージタグがあり、idというタグがあり、Javascriptで「名前」、「スーツ」、「値」のカードオブジェクトが作成されています。 "名前"と "スーツ"はローカルの "images"フォルダにある ".png"として各カード（すなわちAceSpades、TenDiamonds、JackClubs ...など）のファイル名に関連しています。コードを実行すると、 "appendChild null"というプロパティを読み取れません。以下は

私は今のところ、私はから来ていますどこのアイデアを与えるために持っているJavaScriptコードからの抜粋です：

function card(name, suit, value) { 
    this.name = name; 
    this.suit = suit; 
    this.value = value; 
} 

var cardsInDeck = []; 
var suits = ["Spades","Hearts","Clubs","Diamonds"]; 
var names = ["Ace","Two","Three","Four","Five","Six","Seven","Eight","Nine","Ten","Jack","Queen","King"]; 
var values = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 0, 0, 0]; 
var card; 

for (var i = 0; i < suits.length; i++) { 
    for (var j = 0; j < names.length; j++) { 
     cardsInDeck.push(new card(names[j], suits[i], values[j])); 
    } 
} 

var b1, b2, b3, p1, p2, p3; 

var drawOne = function() { 
    var card = cardsInDeck.pop(); 
    return card; 
} 

var initialDealOut = function() { 
    b1 = drawOne(); 
    p1 = drawOne(); 

    b2 = drawOne(); 
    p2 = drawOne(); 
} 

initialDealOut(); 

var b1n = b1.name + b1.suit; 

私はdivに画像を配置するために使用しようとしていますが、コードされます：

var b1Image = function() { 
    var div = document.getElementById('b1'); 
    var image = document.createElement('img'); 
    image.src = "image/" + b1n + ".png"; 
    div.appendChild(image); 
} 

b1Image(); 

私は画像を配置したい場所のコアHTMLは次のとおりです。

<div class="row"> 
    <ul class="cards"> 
    <li class="box"> 
     <div class="card" id="b1"> 
     <img src=""> 
     </div> 
    </li> 
    </ul> 
</div> 

私は同様の質問に関連していくつかの回答を探しましたが、答えが得られなかったので、私はそれらを実装しようとしたようにうまくいかないようです。私はプログラミングに慣れていないので、これは簡単な修正だと確信していますが、私はそれに正しく近づいていない可能性が高いです。

私は、この質問がもたらす混乱について事前にお詫びし、誰かがこれを解決するのに役立つ援助を感謝します。

Answer 1

に続いてsrc

<img id='my_image' src=""> 

を変更することができます必要があります：コードが更新されました。

ページがロードされる前に、機能b1Image()を実行しようとしています。 bodyタグにonload="b1Image()"を追加すると、ページがロードされた後にコードが実行されます。 また、スクリプトファイルまたはスクリプトタグで関数を実行しないでください。編集する前に

：b1を初期化せずにvar b1n = b1.name + b1.suit;を実行

が問題の原因である可能性があります。

関数initialDealOutを実行して初期化してから、b1nを割り当ててください。

Answer 2

あなたはimgタグとJavascript（jQueryの）ためid編集jQueryの

$("#my_image").attr("src","image.jpg");