Question

编码新手，请保持柔和。由于我们班级的限制，必须使用纯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

图像没有value属性。使用data属性可能会更好。

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)">

Answer 3

JavaScript是正常的。所有问题都在调用函数中。在JS中，当您获得html元素时，其属性不是属性。要获取属性，您需要调用this.getAttribute('<attr name>')（在您的任务中，this.getAttribute('value')）
因此，不需要任何data-属性。

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

3 个答案: