Рациональное использование функции
Функция создает новые элементы, каждый раз прибавляя к значению 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>
|
Цитата:
|
только там требуется больше вычислений и в применении к другим ситуациям всё рушится, когда нет явного задания style.top (или в атрибуте style)
а также уже наверное в курсе, что addEventListener - не кроссбраузерная |
Цитата:
кст если через тег или атрибут style задавать, то вроде он не считывается в большинстве браузеров... |
bes,
согласен, больше вычислений. Но зато все действия не выходят за рамки одной функции, а это помогает не затеряться в большом скрипте программисту. Возможно существуют более простые подходы, однако мой уровень знаний js не позволяет тут их продемонстрировать. Про addEventListener, да, знаю.. Просто удобно использовать :) Maxmaxmахimus, я пока еще не понимаю что такое ООП, но для простых задач я думаю его использовать не следует. Все гениальное просто :) |
Цитата:
Цитата:
<style>
button {
height: 50px;
}
</style>
<button style="width: 50px">click</button>
<script>
document.body.children[0].onclick = function () {
alert(this.style.width +'; ' + this.style.height)
}
</script>
|
Цитата:
Однако, конкретно в моем случае, не вижу этой необходимости, так как коллекция собирается по требованию пользователя и функция не будет использоваться часто.. |
Цитата:
|
Цитата:
<button style="background: 'green'">click</button> И где же цвет? |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 12:16. |