Javascript 事件.target.children[1]在触发;onclick";事件两次
我正在建立一个简单的记忆游戏。我有6张正面朝下的图片,玩家需要找到图片对。我添加了一个包含图像的img标签和一个p标签作为一个数字(0,1,2),并创建了一个函数来检查两个数字在不同的点击中是否匹配。如果是,则表示图像相同,且球员得分。 我的问题是,当我两次单击同一图像时,为什么会出现“event.target.children[1]未定义”错误?我试图寻找类似的错误,但没有找到任何答案。请帮忙:)Javascript 事件.target.children[1]在触发;onclick";事件两次,javascript,html,Javascript,Html,我正在建立一个简单的记忆游戏。我有6张正面朝下的图片,玩家需要找到图片对。我添加了一个包含图像的img标签和一个p标签作为一个数字(0,1,2),并创建了一个函数来检查两个数字在不同的点击中是否匹配。如果是,则表示图像相同,且球员得分。 我的问题是,当我两次单击同一图像时,为什么会出现“event.target.children[1]未定义”错误?我试图寻找类似的错误,但没有找到任何答案。请帮忙:) var node1=document.getElementById('row1').childr
var node1=document.getElementById('row1').children;
var node2=document.getElementById('row2').children;
var childValue1=-1;
var childValue2=-1;
var-click=0;
var得分=0;
var失败=0;
//翻转图像函数
功能imgFlip(事件){
单击+=1;
var事件1;
var事件2;
如果(单击===1){
//翻转第一个图像
childValue1=parseInt(event.target.children[1].innerHTML,10);
var image=event.target.children[0];
event1=event.target;
image.style.visibility=“可见”;
console.log(event1);
}
否则如果(单击===2){
//翻转第二个图像
childValue2=parseInt(event.target.children[1].innerHTML,10);
var image=event.target.children[0];
event2=event.target;
console.log(event2);
image.style.visibility=“可见”;
如果(事件1==事件2){
点击-=1;
}
if(childValue1==childValue2){
//检查p标记中显示的值是否匹配。如果匹配,请重置单击次数并添加到分数
//否则,重置点击次数,增加失败的尝试次数,并调用重置功能来重置图像。
分数+=2分;
document.getElementById('scored')。innerHTML=score;
单击=0;
}否则{
如果(分数>0){
分数-=1;
}
失败+=1;
document.getElementById('scored')。innerHTML=score;
document.getElementById('failed')。innerHTML=失败;
单击=0;
重置();
}
}
//警报(childValue+childValue1);
}
//如果img不具有相同功能,则重置
函数重置(){
对于(var i=0;i)您是否尝试过event.currentTarget.children[1]
?
var node1 = document.getElementById('row1').children;
var node2 = document.getElementById('row2').children;
var childValue1 = -1;
var childValue2 = -1;
var click = 0;
var score = 0 ;
var failed = 0;
// flip image function
function imgFlip(event){
click += 1;
var event1;
var event2;
if(click === 1){
//flip the first image
childValue1 =parseInt(event.target.children[1].innerHTML, 10);
var image = event.target.children[0];
event1 = event.target;
image.style.visibility = "visible";
console.log(event1);
}
else if(click ===2){
//flip the second image
childValue2 =parseInt(event.target.children[1].innerHTML, 10);
var image = event.target.children[0];
event2 = event.target;
console.log(event2);
image.style.visibility = "visible";
if(event1 === event2){
click -= 1;
}
if(childValue1 === childValue2){
//check if the values displayed in the p tags are matching. if yes, reset number of clicks and add to score
//else, reset number of clicks , increment failed attempts and call the reset function that will reset the images.
score +=2;
document.getElementById('scored').innerHTML = score;
click = 0;
}else{
if(score >0 ){
score -=1;
}
failed +=1;
document.getElementById('scored').innerHTML = score;
document.getElementById('failed').innerHTML = failed;
click = 0;
reset();
}
}
//alert(childValue + childValue1);
}
//reset if img not the same function
function reset(){
for(var i=0; i<node2.length; i++){
node2[i].children[0].style.visibility = "hidden";
node1[i].children[0].style.visibility = "hidden";
}
}
// reset btn function
document.getElementById('resetBtn').addEventListener('click',resetGame);
function resetGame(){
for(var i=0; i<node1.length; i++){
node2[i].children[0].style.visibility = "hidden";
node1[i].children[0].style.visibility = "hidden";
click=0;
score = 0;
failed = 0;
document.getElementById('scored').innerHTML =0;
document.getElementById('failed').innerHTML =0;
}
}