Question

我写了一个小程序，同时学习javascript尝试让用户选择两张匹配的卡片。该程序在Safari和Explorer（当前版本）中运行良好，但在Chrome或Firefox中无效。我在这里提供了一个精简版。在Safari中，您单击显示的图像并运行该功能并加载图像，然后选择下一个图像以查看它是否匹配。在Chrome中，如果单击图像则没有任何反应。在这个版本中我复制了这个点击只会在Safari中显示图像。我无法理解为什么Chrome＆amp; firefox不会运行它？ PS我是学习javascript的新手，并且不了解jquery或javascript以外的任何其他知识。

<!DOCTYPE html>
<html>
<head>
<title>Match the Cards</title>
<link rel="stylesheet" href="stylesheet1.css" type="text/css" />
<script>
var turns = 0;
var firstcard;
var secondcard;
var backcard ="images/blueback.png";
var faces = new Array(
"images/kh.png", "images/ks.png");

function ChooseCard(card) {
if (turns == 2) {
return;
}if (turns == 0) {
firstcard = card;
document.images(card).src = faces[card];
turns = 1;
} else {
secondcard = card;
document.images(card).src = faces[card];
turns = 2;
}
}

</script>

</head>

<body>

<table>
<tr>
<td><img id="image_point" onclick="ChooseCard(0);" src="images/blueback.png" /></td>
<td><img id="image_point" onclick="ChooseCard(1);" src="images/blueback.png" /></td>
</tr>
</table>

</body>
</html>

Answer 1

document.images是一个数组（类似对象，确切地说是NodeList），而不是函数。 ()用于调用函数，而[]用于访问对象（包括数组）的属性。

所以你应该写：

document.images[card].src = faces[card];

甚至在NodeList上使用item方法（这是一个函数）：

document.images.item(card).src = faces[card];

如果您使用其中一种方式，它也可以在Safari和IE中使用，因为这是标准方式。

jsFiddle Demo（图片不会显示，但现在可以使用）

实际上，如果你看一下你的browser console，它会告诉你images不是一个带有好消息的函数：

未捕获的TypeError：对象#<HTMLDocument>的属性“图像”不是功能

<小时/> 注意：我知道您是初学者，但是您应该阅读缩进，以及为什么它非常重要。实际上，你永远不应该向其他人展示代码（包括你未来的自己）。

Answer 2

我想你想要：

document.images[card].src

而不是

document.images(card).src

document.images是一个数组，因此您需要使用[index]来访问各个数组项。

javascript函数无法在chrome中运行

2 个答案: