Рациональное использование функции
Функция создает новые элементы, каждый раз прибавляя к значению 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(), чтобы код приобрел более аккуратный вид? |
как вариант добавить
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); } Зачем для одного счетчика целую функцию объявлять? |
Maxmaxmахimus,
имел в виду в том числе глобальную переменную :) PashPP, у меня ваш вариант не работает, если не трудно выложите в run - виде, можно без css и классов |
Maxmaxmахimus,
все равно, слишком сложное написание, для функции, которая выполняет простейшее действие ( ладно, будем думать сами, как надумаем, выложим :) |
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> |
PashPP,
работает, только вот, как и у Maxmaxmахimus, имеется глобальная переменная, использовать которую для простейшей функции нецелесообразно |
dmitry111,
div.style.top = parseInt(document.getElementsByTagName("div")[document.getElementsByTagName("div").length - 1].style.top) + 70 + "px"; |
Что ж не работает-то
<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> |
PashPP, [html run]
|
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> |
Часовой пояс GMT +3, время: 22:48. |