80075

Javascript - Onclick event should trigger a function and it's not working

Question:

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.<br /> An onclick event above the "<em>missing face</em>" should trigger my function <strong>nextLevel()</strong> that will erase the two divs (mirror divs) and generate new content.<br /> I have develop this script in order to achieve the problem but I have an specific error for the onclick event. It says:

<blockquote>

Uncaught TypeError: Cannot set property 'onclick' of null

</blockquote>

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]); } }

Answer1:

It was the position of the function nextLevel. Adding it inside the function generateFaces will provide the usability I was looking for. Thank you all.

Answer2:

generally the

<blockquote>

Uncaught TypeError: Cannot set property 'onclick' of null

</blockquote>

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" ..

Recommend

  • Send array to function in handlebars?
  • previous selected value also append in textarea but i want only one (current) selected value append
  • How to pass the id of the parent to the create view of a child
  • Wordpress Get value of queried category in URL
  • droppable in droppable
  • XML - XSLT - document() function inside count() function
  • Git rebase conflicts after successful merge?
  • Mac: How to assign a file extension to be opened with my java .app application?
  • Open pdf.js with a data URL in IE11
  • How to use output buffering inside PHPUnit test?
  • Sinatra server won't start - “wrong number of arguments”
  • jQuery file download plugin
  • Understanding Intl.DateTimeFormat as a JavaScript object
  • How to add closing tag for canvas in three js rendered Canvas?
  • Get the pasted content on document on paste event
  • where do I find the xml.dom python package for the python-2.6.0-8.9.28 and I have a suse/x86_64 vers
  • How to define and use opencv mat of user type
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Cassandra Data Model
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Build own AppleScript numerical error handling
  • Websockets service method fails during R startup
  • How can I estimate amount of memory left with calling System.gc()?
  • Google cloud sdk not working when python points python3
  • Apache 2.4 - remove | delete | uninstall
  • Is there a mandatory requirement to switch app.yaml?
  • using HTMLImports.whenReady not working in chrome
  • Hits per day in Google Big Query
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • Getting Messege Twice Using IMvxMessenger
  • Linking SubReports Without LinkChild/LinkMaster
  • How can I remove ASP.NET Designer.cs files?
  • python draw pie shapes with colour filled
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • Is there any way to bind data to data.frame by some index?
  • How can i traverse a binary tree from right to left in java?
  • Python/Django TangoWithDjango Models and Databases