Html Question posted in
Some basic documentation can be found here.

Html – how to get selected image name value in javascript?

I am building a memory game and i have some code that works if i click the image it shows the name of the image in the console.

I tried to research it but can’t find any answer.
How do i select image name value for my ImageURL variable?

This is what i have now in my code:

function populateField() {
    for (let i = 0; i < myCardSet.length; i++) {
        let newTile = document.createElement('div');
        let newCard = document.createElement('img');
        let imageURL = newCard.getAttribute('name')
        newCard.setAttribute('src', imageURL)
        newCard.setAttribute('name', imageURL)
        newTile.appendChild(newCard)
        myField.appendChild(newTile)
        let img = {
            src: 'cover.png',
            class: '.covered'
        }
    }
}
<body>

    <div id="field"><img src="../begin/img/calf.jpg" alt="" name="calf">
        <img src="../begin/img/cat.jpg" alt="" name="cat">
        <img src="../begin/img/chick.jpg" alt="" name="chick">
        <img src="../begin/img/cow.jpg" alt="" name="cow">
        <img src="../begin/img/dog.jpg" alt="" name="dog">
        <img src="../begin/img/duck.jpg" alt="" name="duck">
        <img src="../begin/img/goat.jpg" alt="" name="goat">
        <img src="../begin/img/goose.jpg" alt="" name="goose">
        <img src="../begin/img/hen.jpg" alt="" name="hen">
        <img src="../begin/img/horse.jpg" alt="" name="horse">
        <img src="../begin/img/kitten.jpg" alt="" name="kitten">
        <img src="../begin/img/lamb.jpg" alt="" name="lamb">
        <img src="../begin/img/pig.jpg" alt="" name="pig">
        <img src="../begin/img/piglet.jpg" alt="" name="piglet">
        <img src="../begin/img/puppy.jpg" alt="" name="puppy">
        <img src="../begin/img/rooster.jpg" alt="" name="rooster">
        <img src="../begin/img/sheep.jpg" alt="" name="sheep">
        <img src="../begin/img/veal.jpg" alt="" name="veal">
        <img src="../begin/img/cat.jpg" alt="" name="cat">
        <img src="../begin/img/chick.jpg" alt="" name="chick">
        <img src="../begin/img/cow.jpg" alt="" name="cow">
        <img src="../begin/img/dog.jpg" alt="" name="dog">
        <img src="../begin/img/duck.jpg" alt="" name="duck">
        <img src="../begin/img/goat.jpg" alt="" name="goat">
        <img src="../begin/img/goose.jpg" alt="" name="goose">
        <img src="../begin/img/hen.jpg" alt="" name="hen">
        <img src="../begin/img/horse.jpg" alt="" name="horse">
        <img src="../begin/img/kitten.jpg" alt="" name="kitten">
        <img src="../begin/img/lamb.jpg" alt="" name="lamb">
        <img src="../begin/img/pig.jpg" alt="" name="pig">
        <img src="../begin/img/piglet.jpg" alt="" name="piglet">
        <img src="../begin/img/puppy.jpg" alt="" name="puppy">
        <img src="../begin/img/rooster.jpg" alt="" name="rooster">
        <img src="../begin/img/sheep.jpg" alt="" name="sheep">
        <img src="../begin/img/veal.jpg" alt="" name="veal">
    </div>

    <script src="js/memory.js" type="module"></script>
</body>

I get the error 404 not found.

Please help!
thanks already!

Tags:

2

Answers


  1. 0

    This code will iterate the collection of images you have in your html and return the src of each. You can start from here to build the logic you want (unclear from the question)

    /*function populateField() {
    for (let i = 0; i < myCardSet.length; i++) {
        let newTile = document.createElement('div');
        let newCard = document.createElement('img');
        let imageURL = newCard.getAttribute('name')
        newCard.setAttribute('src', imageURL)
        newCard.setAttribute('name', imageURL)
        newTile.appendChild(newCard)
        myField.appendChild(newTile)
        let img = {
            src: 'cover.png',
            class: '.covered'
        }
    }
}*/

const imageCollection = document.getElementsByTagName("img");

for (let i = 0; i < imageCollection.length; i++) {
  console.log(imageCollection[i].getAttribute("name"));
}
    <body>

    <div id="field"><img src="../begin/img/calf.jpg" alt="" name="calf">
        <img src="../begin/img/cat.jpg" alt="" name="cat">
        <img src="../begin/img/chick.jpg" alt="" name="chick">
        <img src="../begin/img/cow.jpg" alt="" name="cow">
        <img src="../begin/img/dog.jpg" alt="" name="dog">
        <img src="../begin/img/duck.jpg" alt="" name="duck">
        <img src="../begin/img/goat.jpg" alt="" name="goat">
        <img src="../begin/img/goose.jpg" alt="" name="goose">
        <img src="../begin/img/hen.jpg" alt="" name="hen">
        <img src="../begin/img/horse.jpg" alt="" name="horse">
        <img src="../begin/img/kitten.jpg" alt="" name="kitten">
        <img src="../begin/img/lamb.jpg" alt="" name="lamb">
        <img src="../begin/img/pig.jpg" alt="" name="pig">
        <img src="../begin/img/piglet.jpg" alt="" name="piglet">
        <img src="../begin/img/puppy.jpg" alt="" name="puppy">
        <img src="../begin/img/rooster.jpg" alt="" name="rooster">
        <img src="../begin/img/sheep.jpg" alt="" name="sheep">
        <img src="../begin/img/veal.jpg" alt="" name="veal">
        <img src="../begin/img/cat.jpg" alt="" name="cat">
        <img src="../begin/img/chick.jpg" alt="" name="chick">
        <img src="../begin/img/cow.jpg" alt="" name="cow">
        <img src="../begin/img/dog.jpg" alt="" name="dog">
        <img src="../begin/img/duck.jpg" alt="" name="duck">
        <img src="../begin/img/goat.jpg" alt="" name="goat">
        <img src="../begin/img/goose.jpg" alt="" name="goose">
        <img src="../begin/img/hen.jpg" alt="" name="hen">
        <img src="../begin/img/horse.jpg" alt="" name="horse">
        <img src="../begin/img/kitten.jpg" alt="" name="kitten">
        <img src="../begin/img/lamb.jpg" alt="" name="lamb">
        <img src="../begin/img/pig.jpg" alt="" name="pig">
        <img src="../begin/img/piglet.jpg" alt="" name="piglet">
        <img src="../begin/img/puppy.jpg" alt="" name="puppy">
        <img src="../begin/img/rooster.jpg" alt="" name="rooster">
        <img src="../begin/img/sheep.jpg" alt="" name="sheep">
        <img src="../begin/img/veal.jpg" alt="" name="veal">
    </div>

    <script src="js/memory.js" type="module"></script>
</body>
    Login or Signup to reply.
  2. 0

    You can iterate over the img elements that are children of the container with id="field". The filename of an image can be found by using the subString() method and using the position of the last backslash character in the string.

    const imageElements = document.getElementById("field").getElementsByTagName("img");

for (let image of imageElements) {
  let imageSrc = image.getAttribute("src");
  console.log(imageSrc.substring(imageSrc.lastIndexOf("/")+1));
}
    <body>

    <div id="field"><img src="../begin/img/calf.jpg" alt="" name="calf">
        <img src="../begin/img/cat.jpg" alt="" name="cat">
        <img src="../begin/img/chick.jpg" alt="" name="chick">
        <img src="../begin/img/cow.jpg" alt="" name="cow">
        <img src="../begin/img/dog.jpg" alt="" name="dog">
        <img src="../begin/img/duck.jpg" alt="" name="duck">
        <img src="../begin/img/goat.jpg" alt="" name="goat">
        <img src="../begin/img/goose.jpg" alt="" name="goose">
        <img src="../begin/img/hen.jpg" alt="" name="hen">
        <img src="../begin/img/horse.jpg" alt="" name="horse">
        <img src="../begin/img/kitten.jpg" alt="" name="kitten">
        <img src="../begin/img/lamb.jpg" alt="" name="lamb">
        <img src="../begin/img/pig.jpg" alt="" name="pig">
        <img src="../begin/img/piglet.jpg" alt="" name="piglet">
        <img src="../begin/img/puppy.jpg" alt="" name="puppy">
        <img src="../begin/img/rooster.jpg" alt="" name="rooster">
        <img src="../begin/img/sheep.jpg" alt="" name="sheep">
        <img src="../begin/img/veal.jpg" alt="" name="veal">
        <img src="../begin/img/cat.jpg" alt="" name="cat">
        <img src="../begin/img/chick.jpg" alt="" name="chick">
        <img src="../begin/img/cow.jpg" alt="" name="cow">
        <img src="../begin/img/dog.jpg" alt="" name="dog">
        <img src="../begin/img/duck.jpg" alt="" name="duck">
        <img src="../begin/img/goat.jpg" alt="" name="goat">
        <img src="../begin/img/goose.jpg" alt="" name="goose">
        <img src="../begin/img/hen.jpg" alt="" name="hen">
        <img src="../begin/img/horse.jpg" alt="" name="horse">
        <img src="../begin/img/kitten.jpg" alt="" name="kitten">
        <img src="../begin/img/lamb.jpg" alt="" name="lamb">
        <img src="../begin/img/pig.jpg" alt="" name="pig">
        <img src="../begin/img/piglet.jpg" alt="" name="piglet">
        <img src="../begin/img/puppy.jpg" alt="" name="puppy">
        <img src="../begin/img/rooster.jpg" alt="" name="rooster">
        <img src="../begin/img/sheep.jpg" alt="" name="sheep">
        <img src="../begin/img/veal.jpg" alt="" name="veal">
    </div>

    <script src="js/memory.js" type="module"></script>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search