Форум

dmitry111 · #1 (**permalink**) 26.08.2012, 14:47

Функция создает новые элементы, каждый раз прибавляя к значению top 70px.

В результате чего абсолютно позиционированные элементы идут друг за другом

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>выпвып</title>
</head>

<body>
<button id="button">создать новый элемент</button>
<script>
    var gfunc = 20;

    function newPosition() {
        gfunc += 70;
        return gfunc + "px";
    }

    function create() {

        var  div = document.createElement("div");
        div.style.position = "absolute";
        div.style.top = newPosition();
        div.style.left = "20px";
        div.style.width = "200px";
        div.style.height = "50px";
        div.style.border = "1px solid #000";
        document.body.appendChild(div);
    }
    document.getElementById("button").addEventListener("click", create);
</script>
</body>
</html>

Вопрос:
как сделать функцию newPosition() внутри функции create(), чтобы код приобрел более аккуратный вид?

PashPP · #2 (**permalink**) 26.08.2012, 14:50

как вариант добавить
div.className = 'myDiv'

и стиль
div.style.left = "20px";
div.style.width = "200px";
div.style.height = "50px";
div.style.border = "1px solid #000";

Вынести в цсс.

ну и.

function create() {
gfunc += 70;
var div = document.createElement("div");
div.className = 'myDiv'
div.style.top = gfunc + 'px';
document.body.appendChild(div);
}

Зачем для одного счетчика целую функцию объявлять?

dmitry111 · #3 (**permalink**) 26.08.2012, 15:31

Maxmaxmахimus,

имел в виду в том числе глобальную переменную

PashPP,

у меня ваш вариант не работает, если не трудно выложите в run - виде, можно без css и классов

dmitry111 · #4 (**permalink**) 26.08.2012, 15:44

Maxmaxmахimus,

все равно, слишком сложное написание, для функции, которая выполняет простейшее действие (
ладно, будем думать сами, как надумаем, выложим

PashPP · #5 (**permalink**) 26.08.2012, 16:05

dmitry111,
Все там работает. Наверно, ты не перенес обьявление var gfunc просто со своего варианта.
PS. А как тут вылаживать в run - виде?

<!DOCTYPE html>
<style>
.myDiv {
   position: absolute;
   left: 20px;
   width: 200px;
   height: 500px;
   border: 1px solid #000;
}
</style>
<body>
</body>
<script type="text/javascript">
var gfunc = 20;
function create() {
 gfunc += 70;
 var div = document.createElement("div");
 div.className = 'myDiv'
 div.style.top = gfunc + 'px';
 document.body.appendChild(div);
}
create()
create()
create()
</script>

dmitry111 · #6 (**permalink**) 26.08.2012, 16:11

PashPP,

работает, только вот, как и у Maxmaxmахimus, имеется глобальная переменная, использовать которую для простейшей функции нецелесообразно

lord2kim · #7 (**permalink**) 26.08.2012, 16:22

dmitry111,

div.style.top = parseInt(document.getElementsByTagName("div")[document.getElementsByTagName("div").length - 1].style.top) + 70 + "px";

bes · #8 (**permalink**) 26.08.2012, 16:28

Что ж не работает-то

<button id="button">создать новый элемент</button>
<script>
window.onload = function () {
    var gfunc = 20;//уже не глобальная

    function create() {
		gfunc += 70;
        var  div = document.createElement("div");
        div.style.position = "absolute";
        div.style.top =  gfunc + 'px';
        div.style.left = "20px";
        div.style.width = "200px";
        div.style.height = "50px";
        div.style.border = "1px solid #000";
        document.body.appendChild(div);
    }
    document.getElementById("button").addEventListener("click", create);
}
</script>

bes · #9 (**permalink**) 26.08.2012, 16:41

PashPP, [html run]

dmitry111 · #10 (**permalink**) 26.08.2012, 16:49

lord2kim,

гениально! Этот подход мне нравится!

Вот он в работе:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>выпвып</title>
</head>

<body>
<button id="button">создать новый элемент</button>
<script>

    function create() {
        function size() {
            var sss = document.getElementsByTagName("div")[0];
            if (sss) {
            var rrr = parseInt(document.getElementsByTagName("div")[document.getElementsByTagName("div").length - 1].style.top) + 70 + "px";
            return rrr;
            }
            else {
                return "50px";
            }
        }

        var  div = document.createElement("div");
        div.style.position = "absolute";
        //div.style.top = newPosition();
        div.style.left = "20px";
        div.style.top =  size();
        div.style.width = "200px";
        div.style.height = "50px";
        div.style.border = "1px solid #000";
        document.body.appendChild(div);
    }
    document.getElementById("button").addEventListener("click", create);
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript