如何在javascript中获取选定的图像名称值？

问题描述 投票：0回答：2

我正在构建一个记忆游戏，如果我单击图像，我有一些代码可以工作，它会在控制台中显示图像的名称。

我尝试研究但找不到任何答案。 如何为 ImageURL 变量选择图像名称值？

这就是我的代码中现在的内容：

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>

我收到错误 404 未找到。

请帮忙！ 已经谢谢了！

javascript html
2个回答
1
投票

此代码将迭代 html 中的图像集合并返回每个图像的 src。您可以从这里开始构建您想要的逻辑（问题中不清楚）

/*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>

0
投票

您可以使用 

img
迭代作为容器子级的 
id="field"
元素。可以使用 
subString()
方法并使用字符串中最后一个反斜杠字符的位置来找到图像的文件名。

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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.