將src img渲染為HTML

Question

我正在嘗試讓PNG在renderCardsOnBoard函數中呈現，但是它不起作用。 每個PNG的路徑都在cardsOnBoard對象中。 我試圖設置每個PNG的src，但也無法正常工作。 我可能沒有使用正確的選擇器或以某種方式濫用了它。

感謝您提供的任何幫助。

var mainDeck = [];
var selectedSlots = [];
var cardsOnBoard = {
  0: null,
  1: null,
  2: null,
  3: null,
  4: null,
  5: null,
  6: null,
  7: null,
  8: null,
  9: null,
  10: null,
  11: null
};


// Generate random cards
function createCard() {
  var colors = ['green', 'purple', 'red'];
  var shapes = ['cylinder', 'diamond', 'purple'];
  var fills = ['filled', 'outline', 'solid'];
  var sizes = ['1', '2', '3'];
  var colorIndex = Math.floor(Math.random() * 3);
  var shapeIndex = Math.floor(Math.random() * 3);
  var fillIndex = Math.floor(Math.random() * 3);
  var sizeIndex = Math.floor(Math.random() * 3);
  var imgIndex = [];
  return { color: colors[colorIndex], shape: shapes[shapeIndex], fill: fills[fillIndex], size: sizes[sizeIndex], img: '.img/' + colors[colorIndex] + '-' + shapes[shapeIndex] + '-' + fills[fillIndex] + '-' + sizes[sizeIndex] + '.png' };
}

//  Push 81 random cards into the deck
for (let i = 0; i < 81; i++) {
  mainDeck.push(createCard());
}
// console.log(mainDeck);
var div;

// Create the gameboard
for (let i = 0; i < 12; i++) {
  div = document.createElement('div');
  div.id = i;
  div.classList.add("cardslot");
  div.addEventListener('click', function (e) {
    selectedSlots.push(this.id);
    this.classList.add('green');
  });
  document.body.appendChild(div);
}
var button = document.createElement("button");
button.textContent = "SET!"
button.addEventListener('click', function (e) {
  removeSelectedCards();
  fillTheCardsOnBoardObject();
  renderCardsOnBoard();
});
document.body.appendChild(button);

// Draw a number of cards from the mainDeck
function draw(num) {
  return mainDeck.splice(0, num);
}
console.log(mainDeck);

function removeSelectedCards() {
  var selectedCards = [];
  selectedSlots.forEach(function (slotId) {
    selectedCards.push(Object.assign({}, cardsOnBoard[slotId]));
    // console.log(selectedCards)
  });
  // Here you would check to see if it is a set

  // To remove them if it is a set, do this
  selectedSlots.forEach(function (slotId) {
    cardsOnBoard[slotId] = null;
  });
  // document.getElementsByClassName('cardslot').classList.remove('green');
}
//something

function fillTheCardsOnBoardObject() {
  for (let key in cardsOnBoard) {
    if (!cardsOnBoard[key]) {
      cardsOnBoard[key] = draw(1)[0];
      console.log("This is the cardsOnBoard object ", cardsOnBoard[key]);
    }
  }
}

function renderCardsOnBoard() {
  var str = '';
  for (let key in cardsOnBoard) {
    document.getElementById(key).textContent = cardsOnBoard[key].shape + cardsOnBoard[key].color + cardsOnBoard[key].fill + cardsOnBoard[key].size;
    document.getElementsByTagName.img = cardsOnBoard[key].image;


  }
  // mainDeck.forEach(function (card) {
  //   str = str + card.color + card.shape + card.fill + card.size + card.img + ' ';
  //   // console.log(str);
  // })
  // document.getElementById('maindeck').textContent = str;
}
console.log("this is mainDeck...", mainDeck);
fillTheCardsOnBoardObject();
renderCardsOnBoard();

Answer 1

嘗試這個。

刪除行document.getElementsByTagName.img = cardsOnBoard[key].image; 從renderCardsOnBoard()並將它們添加到刪除上述行的位置：

    img = document.createElement('img');
    img.classList.add("cardImage");
    document.getElementById(key).appendChild(img);
    document.getElementById(key).querySelector('.cardImage').src = cardsOnBoard[key].img;