Javascript - Onclick事件应该触发一个函数，它不起作用 [英] Javascript - Onclick event should trigger a function and it's not working
问题描述
我正在完成课程证书的评估。在我的最后一项任务中，我被要求创建一个迷你js游戏，它将在两个镜像面生成随机面，一面将丢失面。
缺少面部上方的onclick事件应该触发我的函数 nextLevel（），它将删除两个div（镜像div）并生成新内容。
我已经开发了这个脚本以便解决问题，但我有 onclick 事件的特定错误。它说：
I am finishing an assesstment for a course certificate. In my final task I am asked to create a mini js game that will generate random faces in two mirror sides and one side will have a missing face.
An onclick event above the "missing face" should trigger my function nextLevel() that will erase the two divs (mirror divs) and generate new content.
I have develop this script in order to achieve the problem but I have an specific error for the onclick event. It says:
Uncaught TypeError：无法设置属性'onclick'为null
Uncaught TypeError: Cannot set property 'onclick' of null
但是运行一个DOM查看器，它表示在leftSide Div上添加了5个孩子。请帮助我，我无法找到解决这个问题的方法。
But running a DOM viewer it says there is 5 childs added on the leftSide Div. Please, help me I cant find the solution to this issue.
var numberOfFaces=5;
var theLeftSide=document.getElementById("leftSide");
var theRightSide=document.getElementById("rightSide");
var theBody =document.getElementsByTagName("body")[0];
function generateFaces(){
for(i=0;i<numberOfFaces;i++){
var oImg=document.createElement("img"); // Creates an oimg node
oImg.setAttribute('src', 'http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png'); // sets the source for img file
theLeftSide.appendChild(oImg); // append the img to leftSide Div.
oImg.style.top = Math.floor(Math.random()*401)+'px';
oImg.style.left = Math.floor(Math.random()*401)+'px';
}
copyDiv();
}
function copyDiv(){
var cloned = theLeftSide.cloneNode(true);
cloned.removeChild( cloned.childNodes[ cloned.childNodes.length - 1 ] );
theRightSide.appendChild(cloned);
}
theLeftSide.lastChild.onclick=function nextLevel(event){
event.stopPropagation();
numberOfFaces += 5;
deleteAllChilds();
generateFaces();
};
/*
theBody.onclick =function gameOver() {
alert("Game Over!");
theBody.onclick = null;
theLeftSide.lastChild.onclick = null;
};
*/
function deleteAllChilds(){
while(theLeftSide.childNodes.length>0){
theLeftSide.removeChild(theLeftSide.childNodes[theLeftSide.childNodes.lenth-1]);
}
while(theRightSide.childNodes.length>0){
theRightSide.removeChild(theRightSide.childNodes[theRightSide.childNodes.lenth-1]);
}
}
推荐答案
Uncaught TypeError：无法设置属性'onclick'为null
Uncaught TypeError: Cannot set property 'onclick' of null
当您尝试在尚未加载的DOM对象上应用事件时，会警告
！为了避免这种情况，请验证您的脚本是否已加载到< head> 元素中，或者如果它位于正文中，请确保在HTML内容具有ID为leftSide之前加载它..
is warned when you're trying to apply an events on a DOM Object which is not loaded yet !! to avoid this verify that your script is loaded in the <head> element or if it is in the body be sure that it was loaded before HTML content having as id "leftSide" ..
这篇关于Javascript - Onclick事件应该触发一个函数，它不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
