Why does this code stop functioning midway

Question

https://code.sololearn.com/W859LPb1K72J/?ref=app

Answer 1

Well, I have taken 2 seconds for do it for you:

https://code.sololearn.com/WPG5hMIJRXj4/?ref=app

Answer 2

You code is messy, mixing JQuery and pure JS, using identifiers not explicit: your function 'clone' (never called) have the same name than a local variable used in it, and than a JQuery method (itself having same name than DOM API built-in method :P)...

Anyway, JQuery isn't always the solution... remplace all your JS/JQuery code by this:

window.onload=function(){
document.onclick=function(event){
document.body.innerHTML+='<img alt="er" class="er" style="position:absolute;" src="http://imgur.com/QqyqanF.jpg"/>';
var last = document.querySelector('body>img:last-child');
last.style.left = event.clientX+'px';
last.style.top = event.clientY+'px';
};
};

... working good, without also quick limit than previously ;)

Anyway, this can be improved by using the DOM API better than by rewriting all body content (should become slow with a (very) big number of click ^^

[edit]
And change your css: I'll swap 'id' attribut for 'class' attribute, as else you will have many element with the same id (wich is mandatory to be unique)... (maybe the source of the previous problem... or not ;))

Answer 3

> Replace your Css selector rule "#er" by ".er" to match a class name rather than an id one;

> Delete the <script> lreference link to JQuery (not useful in your case)

> Replace all your JS code by mine:

window.onload=function(){
document.onclick=function(event){
document.body.innerHTML+='<img alt="er" class="er" style="position:absolute;" src="http://imgur.com/QqyqanF.jpg"/>';
var last = document.querySelector('body>img:last-child');
last.style.left = event.clientX+'px';
last.style.top = event.clientY+'px';
};
};

Answer 4

Oh, and change in your html the 'id="er"' of your <img> tag by class=".er", obviously ^^

(Sorry, it was 20 hours ago, and I don't have diving into again ;))

Answer 5

my program is designed to generate images on the place where the user click it works for sometime but then it stops on 11th click

Answer 6

thanks and that post "didn't get it can you explain what I have to do" was for Calvin's answer but thanks for solving the problem

Answer 7

Included jQuery twice.

Answer 8

still stops working midway

Answer 9

What you want to do?

Answer 10

triggers 2 click events at the same time?

Answer 11

The program loads the same image from internet too many times.

Use image object instead,
var imgur = new Image();
imgur.src = 'http://imgur.com/QqyqanF.jpg';

Answer 12

didn't get it ? can you explain what I have to do?