为什么获取图像值时 this.value 未定义？

Question

编码新手，请保持温和。由于我们的类的限制，这必须使用纯 JavaScript来完成。目前，我正在尝试做的是console.log()用户单击的图像的值。在这种情况下，它要么value="0"是“摇滚”，要么是value="1"“纸”，要么value="2"是“剪刀”。我对使用没有经验this.value，我想知道是否可以将单击图像的值作为参数传递给名为“check()”的函数。

HTML

<img src="img/rock.png" alt="Rock" id="rock" value="0" onclick="check(this.value)">
<img src="img/paper.png" alt="Paper" id="paper" value="1" onclick="check(this.value)">
<img src="img/scissors.png" alt="Scissors" id="scissors" value="2" onclick="check(this.value)">

JavaScript（无 jQuery）

function check(inputValue) {
            console.log(inputValue);
        }

我希望输出为 0、1 或 2，具体取决于用户单击了哪个图像。目前，我得到的只是undefined。

Answer 1

因为图像没有value属性，所以它总是作为undefined. 另一种方法是使用数据属性。这些可以使用检索this.dataset.<attributeName>。

例如，data-value将通过执行访问this.dataset.value。

function check(inputValue) {
  console.log(inputValue);
}

<img src="img/rock.png" alt="Rock" id="rock" data-value="0" onclick="check(this.dataset.value)">
<img src="img/paper.png" alt="Paper" id="paper" data-value="1" onclick="check(this.dataset.value)">
<img src="img/scissors.png" alt="Scissors" id="scissors" data-value="2" onclick="check(this.dataset.value)">