Привет всем, я еще только изучаю javascript, поэтому мне еще трудно
. Хотелось бы сделать круг, при клике на него, появлялся новый круг, при клике на другой круг и еще один (3 круг) появлялся и так до бесконечности. Я сделал рандомное перемещение и создание клонов, но тут незадача... При клике только на один круг, появляется новый, почему-то остальные появляются, но не двигаются также как и главный, хотя должен быть идентичным.
В идеале должно: при клике на каждый круг он создает еще круг и появляются они в разном месте, при этом передвигались. Попробуем?
<html>
<head>
<title>Перемещение круга</title>
<style>
.svgcircle
{
position: absolute;
}
#circle
{
transition: 1s cubic-bezier(0, 0, 1, 1);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script>
window.onclick = function()
{
var circle = event.target;
circle.setAttribute("cx",Math.random()*500)
circle.setAttribute("cy",Math.random()*500)
$(".main").clone().appendTo(".container");
}
</script>
<div class="container">
<div class="main">
<svg width ="600" height ="600" class="svgcircle">
<circle id="circle" cx="35" cy="25" r="20" fill="black"/></circle>
</svg>
</div>
</div>
</body>
</html>