如何在if else函数中使用image.src递增计数器？
我想用Javascript做一个rock paper scissors游戏。
var boutonLancer = document.getElementById('lancer');
var images = [document.getElementById('imageP1'),
document.getElementById('imageP2')];
var scoreP1 = document.getElementById('scoreP1');
var scoreP2 = document.getElementById('scoreP2');
var ciseaux = "../Images/ciseaux.png";
var feuille = "../Images/feuille.png";
var pierre = "../Images/pierre.png";
var compteurP1 = 0;
var compteurP2 = 0;
boutonLancer.onclick = function(e) {
var lancer = [Math.floor(Math.random()*(3 - 1 + 1) + 1), Math.floor(Math.random()*(3 - 1 + 1) + 1)];
for (var i=0; i<2; i++) {
switch (lancer[i]) {
case 1: images[i].src = ciseaux;
break;
case 2: images[i].src = feuille;
break;
case 3: images[i].src = pierre;
break;
}
}
console.log(images[0].src);
console.log(images[1].src);
if (images[0].src === ciseaux) {
compteurP1 += 1;
scoreP1.innerHTML = compteurP1;
}
console.log(compteurP1);
}游戏的主要部分运行正常:当我按下按钮时，我的图像会发生变化。在那之后，我想为分数创建一个计数器，但是当我使用image.src执行if..else时，计数器不会递增。
我把console.log放进去看看当我点击按钮时会发生什么: imagesi.src是正确的，但是计数器总是等于0。没有错误，只是始终为0。
PS :当我写if (images.src = ciseaux)的时候，它是有效的，但是第一张图片总是'ciseaux‘(Ciseaux)，当然，这不是我想要的……
注:我简化了if的测试，只是为了尝试一下。
对于测试，这是我的html：
<!DOCTYPE html>
<head>
<title>Pierre Feuille Ciseaux</title>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<h1>Pierre, feuille, ciseaux</h1>
<input id="lancer" type="button">
<div id="pfc">
<img id="imageP1" src="Images/ciseaux.png">
<img id="imageP2" src="Images/ciseaux.png">
</div>
<div id="score">
<div id="scoreP1">0</div>
<div id="scoreP2">0</div>
</div>
<script src="script.js"></script>
</body>回答 2
Stack Overflow用户
发布于 2019-08-08 01:37:52
如果你扩展你的console.log，你会发现你的比较是不起作用的：
console.log(images[0].src, ciseaux);将根据您的环境向您显示类似以下内容：
图像../ https://xl2mc.csb.app/Images/ciseaux.png /ciseah.png
如您所见，如果您询问图像的来源，将返回完整的url。例如，您可以对该字符串的子部分进行比较。
Stack Overflow用户
发布于 2019-08-08 02:40:13
问题是
var ciseaux = "../Images/ciseaux.png";使用图像的相对路径，而实际的src值是绝对路径。
将ciseaux值更改为图像的完整绝对路径。
https://stackoverflow.com/questions/57399256
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号