Как мне выбрать изображение в качестве URL-адреса с моей карты под названием img? ⇐ CSS

[Anonymous]

Я хочу создать игру на память с карточками. И одна из вещей, которые мне нужно сделать, это выбрать изображение на карте под названием img и записать его как URL-адрес.
Кроме того, я не знаю, правильный ли мой код, это что я пробовал:

Код: Выделить всё

Cardgame






[img]../begin/img/calf.jpg[/img]
[img]../begin/img/cat.jpg[/img]
[img]../begin/img/chick.jpg[/img]
[img]../begin/img/cow.jpg[/img]
[img]../begin/img/dog.jpg[/img]
[img]../begin/img/duck.jpg[/img]
[img]../begin/img/goat.jpg[/img]
[img]../begin/img/goose.jpg[/img]
[img]../begin/img/hen.jpg[/img]
[img]../begin/img/horse.jpg[/img]
[img]../begin/img/kitten.jpg[/img]
[img]../begin/img/lamb.jpg[/img]
[img]../begin/img/pig.jpg[/img]
[img]../begin/img/piglet.jpg[/img]
[img]../begin/img/puppy.jpg[/img]
[img]../begin/img/rooster.jpg[/img]
[img]../begin/img/sheep.jpg[/img]
[img]../begin/img/veal.jpg[/img]
[img]../begin/img/cat.jpg[/img]
[img]../begin/img/chick.jpg[/img]
[img]../begin/img/cow.jpg[/img]
[img]../begin/img/dog.jpg[/img]
[img]../begin/img/duck.jpg[/img]
[img]../begin/img/goat.jpg[/img]
[img]../begin/img/goose.jpg[/img]
[img]../begin/img/hen.jpg[/img]
[img]../begin/img/horse.jpg[/img]
[img]../begin/img/kitten.jpg[/img]
[img]../begin/img/lamb.jpg[/img]
[img]../begin/img/pig.jpg[/img]
[img]../begin/img/piglet.jpg[/img]
[img]../begin/img/puppy.jpg[/img]
[img]../begin/img/rooster.jpg[/img]
[img]../begin/img/sheep.jpg[/img]
[img]../begin/img/veal.jpg[/img]

Код: Выделить всё

"use strict";

const myCardSet = ["duck", "kitten", "piglet", "puppy", "calf", "veal", "lamb", "rooster", "horse", "mouse", "dog", "cat", "goose", "goat", "sheep", "pig", "cow", "chick", "hen"];

document.addEventListener('onload', function () {
populatieField()
})

class card {
constructor(card1) {
this.card1 = myCardSet[0]
}
}
function populateField() {
for (let i = 0; i < myCardSet.length; i++) {
let newTile = document.createElement('div');
let newCard = document.createElement('img');
let imageURL = 'img' + card.card1 + '.jpg'
newCard.setAttribute('src', imageURL)
newCard.setAttribute('name', imageURL)
newTile.appendChild(newCard)
myField.appendChild(newTile)
}
}
const myField = document.getElementById('field').addEventListener('click', function onClickCard(e) {
this.getAttribute(e.target.name)
console.log(e.target.name)
}
)

function shuffle(arr) {
var i = arr.length, j, temp;
while (--i >  0) {
j = Math.floor(Math.random() * (i + 1))
temp = arr[j];
arr[j] = arr[i]
arr[i] = temp
}
}

shuffle(myCardSet)
populateField()

Я постоянно получаю сообщение об ошибке: невозможно прочитать свойства неопределенного объекта (чтение 'appendChild ')
at populateField
Пожалуйста, помогите мне, уже спасибо!

Подробнее здесь: https://stackoverflow.com/questions/782 ... called-img