Блог

Главная - Вопросы по программированию - Случайное перемещение разделов JS

Случайное перемещение разделов JS

#javascript

#javascript

Вопрос:

Я должен динамически создавать 10divs и перемещать их случайным образом. Я создал divs, и я могу видеть их в консоли, но не на экране. Виден только один div. Может быть, я пропустил свойство CSS?

Пожалуйста, помогите.

Спасибо!

 create.addEventListener('click' , () => {
    let divs = document.createElement("div")
    let ParentDiv = document.getElementById("parent")
    let w = innerWidth
    let h = innerHeight
    divs.style = `
    width:50px; height:50px; background:red; border-radius:50%;
    position:absolute`
    for(let i = 0 ; i <= 10 ; i  ){
        console.log(divs)
        ParentDiv.append(divs)
    }
    let RandomPlace = setInterval( () =>{
        let innwidth = Math.floor(Math.random() * w)
        let innheight = Math.floor(Math.random() * h)
        divs.style.top = innwidth   "px"
        divs.style.left = innheight   "px"
    },1000)
}) 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #parent{
            width:100%;
            height: 700px;
            overflow: hidden;
            background: rgb(122, 119, 119);
        }
    </style>
</head>
<body>
    <button id="create">Create</button>
    <div id="parent"></div>
</body>
<script src="script.js"></script>
</html>

Комментарии:

1. Вы используете «position: absolute», поэтому я предполагаю, что все ваши divs уложены друг на друга. попробуйте расположить относительное

2. Нет. Проблема не в этом.

Ответ №1:

Ваша переменная divs на самом деле содержит только один div. Итак, вы печатаете один и тот же div 10 раз в цикле for.

Читая свой код, вы должны быть в состоянии видеть только 1 div, родительский элемент. 1. Вы должны создать 10 разделов, а не только один.

Вы могли бы сделать:

 let divs = [];
for (let i = 0; 1 <= 10; i  ) {
  divs.push(document.createElement('div'));
}

И тогда вам также придется их добавлять. Например:

 for(let i = 0; i < divs.length; i  ) {
  ParentDiv.appendChild(divs[i]);
}

Это должно сработать, если вы измените этот код в соответствии с вашими потребностями.

Метки: