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

Question

编码新手，请温柔。由于我们的 class 的限制，这必须使用 pure JavaScript 来完成。目前，我要做的只是 console.log() 用户点击图像的值。在本例中，"Rock" 为 value="0"，"Paper" 为 value="1"，"Scissors" 为 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。另一种方法是使用 data attribute。这些可以使用 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)">

Answer 2

图像没有值属性。您最好使用数据属性。

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

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

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

Why is this.value undefined when getting value of images?

html

javascript

image

this