Placer une image dans div en utilisant Javascript

Question

J'essaie de construire un jeu Baccarat, et je veux placer une image de chaque carte dans un qui est imbriqué dans un article de la liste li. J'ai un tag d'image vide dans un div avec un tag id, et j'ai créé un objet carte en Javascript qui a un "nom", un "costume" et une "valeur". Le «nom» et le «costume» se rapportent au nom de fichier de chaque carte (c.-à-d., AceSpades, TenDiamonds, JackClubs ... etc.) situé dans le dossier local «images» en tant que «.png». Lorsque j'exécute le code, j'obtiens un "Can not read property 'appendChild of null".

Ci-dessous un extrait du code javascript, j'ai à ce jour pour donner une idée de l'endroit où je veux en venir:

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; 

Le code que je suis en train d'utiliser pour placer l'image dans le div est :

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

b1Image(); 

Le code HTML de base pour savoir où je veux placer les images est:

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

J'ai cherché un certain nombre de réponses concernant des questions similaires, mais aucune des réponses données ne semble fonctionner comme j'ai essayé de les mettre en œuvre. Je suis nouveau à la programmation, donc je suis sûr que c'est une solution facile, mais je ne suis probablement pas l'approcher correctement.

Je m'excuse à l'avance pour toute confusion que cette question apporte et j'apprécie toute aide que quelqu'un peut vous prêter pour aider à résoudre ce problème.

Answer 1

Edit: Le code a été mis à jour.

Vous essayez d'exécuter la fonction b1Image() avant le chargement de la page. L'utilisation d'un gestionnaire d'événements ou l'ajout de onload="b1Image()" à la balise body exécutera le code une fois la page chargée. De même, n'exécutez pas la fonction dans votre fichier de script ou votre balise de script.

Avant Edit:

Exécution var b1n = b1.name + b1.suit; sans initialisation b1 pourrait être la source de problèmes.

Exécutez la fonction initialDealOut pour l'initialiser avant de lui attribuer b1n si vous ne l'avez pas fait.

Answer 2

Vous avez besoin d'un id pour la balise img et Javascript (jQuery) peut changer le src

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

Puis, en jQuery

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