Javascript 变量元'；t更新功能失效
正如我的标题所暗示的，我的代码出了问题 这段代码是用于匹配游戏的，我将文档分成两个（节点）并在一侧随机生成笑脸，然后将其克隆到另一侧。我删除了RHS上的最后一个子（脸），这样用户就必须单击页面左侧的额外笑脸才能进入下一个级别，此时添加了5个笑脸以增加难度。用户应该点击左边多余的笑脸来进入下一个级别 除了添加笑脸之外，一切都正常。 问题是，当它进入下一个级别时，出于某种原因，它会将面数重置为5（或下面使用相同注释文本设置的任何数字）Javascript 变量元'；t更新功能失效,javascript,jquery,html,Javascript,Jquery,Html,正如我的标题所暗示的，我的代码出了问题 这段代码是用于匹配游戏的，我将文档分成两个（节点）并在一侧随机生成笑脸，然后将其克隆到另一侧。我删除了RHS上的最后一个子（脸），这样用户就必须单击页面左侧的额外笑脸才能进入下一个级别，此时添加了5个笑脸以增加难度。用户应该点击左边多余的笑脸来进入下一个级别 除了添加笑脸之外，一切都正常。 问题是，当它进入下一个级别时，出于某种原因，它会将面数重置为5（或下面使用相同注释文本设置的任何数字） <!DOCTYPE HTML> <html&g
<!DOCTYPE HTML>
<html>
<head>
<style>
img {position:absolute;}
/*here i tried to use 500px in the style rules for the div but the division was noticeably off centre, therefore, i used 50% instead*/
div {position:absolute; width:50%; height:50%}
#rightSide {left:50%; border-left: 1px solid black}
</style>
</head>
<body onload="generateFaces()">
<h1 id="TitleOfGame">Matching Game!</h1>
<p id="Intructions">To play the game, find the extra smiley on the left hand side and click on it :)</p>
<div id="leftSide">
<!--this div node will display all of the faces on the left side of the screen
faces are dynamically added using javascript-->
</div>
<div id="rightSide">
<!--this div node will display all of the faces on the right side of the screen
cloneNode(true) is used to copy the faces to the right side, and the last child of this branch is deleted, such that there are more faces on the left side.
-->
</div>
<script>
//this part of the script generates 5 faces randomly placed on the left side of the screen
var numberOfFaces=5;
var theLeftSide = document.getElementById("leftSide");
var i=0;
var theBody=document.getElementsByTagName("body")[0];
function generateFaces(){
while (i<numberOfFaces){
var random_top=((Math.random()*400));
var random_left=((Math.random()*400));
var random_top=Math.floor(random_top);
var random_left=Math.floor(random_left);
var img=document.createElement('img');
img.src="smile.png";
img.style.left=random_left+"px";
img.style.top=random_top+"px";
theLeftSide.appendChild(img);
i+=1;
//this part of the script clones those 5 faces onto the right side of the page.
var theRightSide=document.getElementById("rightSide");
var leftSideImages = theLeftSide.cloneNode(true);
}
theRightSide.appendChild(leftSideImages);
leftSideImages=leftSideImages.removeChild(leftSideImages.lastChild);
theLeftSide.lastChild.onclick=function nextLevel(event) {
event.stopPropagation();
while (theLeftSide.firstChild) {
theLeftSide.removeChild(theLeftSide.firstChild);
}
while (theRightSide.firstChild) {
theRightSide.removeChild(theRightSide.firstChild);
}
numberOfFaces++; //OK SO THE PROBLEM IS THAT WHEN IT GOES TO THE NEXT LEVEL, IT RESETS numberOfFaces to 5(or whatever the number that is set here) for some reason!
numberOfFaces++; //adding manually like this gives the same result as x+=5. ie. the variable is not being updated, it is being reset.
numberOfFaces++;
numberOfFaces++;
generateFaces();
};
theBody.onclick=function youFail() {
alert("Game Over!");
theBody.onclick=null;
theLeftSide.lastChild.onclick=null;
};
};
</script>
</body>
</html>
img{位置：绝对；}
/*在这里，我尝试在div的样式规则中使用500px，但分区明显偏离中心，因此，我使用了50%*/
div{位置：绝对；宽度：50%；高度：50%}
#右侧{左侧：50%；左侧边框：1px纯黑色}
配对游戏！
要玩游戏，请在左手边找到多余的笑脸，然后单击它：）
//脚本的这一部分生成5个随机放置在屏幕左侧的面
var numberOfFaces=5；
var theLeftSide=document.getElementById（“leftSide”）；
var i=0；
var theBody=document.getElementsByTagName（“body”）[0]；
函数生成器（）{
（i尝试在generateFaces
函数中将i
变量重置为0
。您还可以在generateFaces
函数中添加计数器变量，因此除非重置，否则您永远不会添加其他面
//脚本的这一部分生成5个随机放置在屏幕左侧的面
var numberOfFaces=5；
var theLeftSide=document.getElementById（“leftSide”）；
var i=0；
var theBody=document.getElementsByTagName（“body”）[0]；
函数生成器（）{
i=0；
而
尝试在generateFaces
函数中将i
变量重置为0
。您还可以在generateFaces
函数中添加计数器变量，因此除非重置它，否则永远不会添加其他面
//脚本的这一部分生成5个随机放置在屏幕左侧的面
var numberOfFaces=5；
var theLeftSide=document.getElementById（“leftSide”）；
var i=0；
var theBody=document.getElementsByTagName（“body”）[0]；
函数生成器（）{
i=0；
而
@J_Suntown回答了你的问题吗？太棒了：）很高兴回答了！你能把我的答案记为正确吗？@J_Suntown回答了你的问题吗？太棒了：）很高兴回答了！你能把我的答案记为正确吗？