Форум

angel026 · #1 (**permalink**) 28.03.2018, 22:52

Ох этот JS...
Снова обращаюсь за помощью к знатокам!
Нужно при срабатывании события (выделение чек бокса) создать новый див с ид, при следующим выделении другого чек бокса, так же создать див с ид+1...
Вот мои "потуги" закончились на этом:

function createNewDiv() {    
    
    var i=0;
    var cpu_in = document.getElementsByClassName("cpu_in")[0];
    var divCpu = document.createElement('div');
    divCpu.setAttribute('id', 'cpu_new_'+i);
    divCpu.innerHTML = "Новый ДИВ";
    var parent = cpu_in.parentNode;
    parent.insertBefore(divCpu, cpu_in); //создаю ДИВ
    i++;
}

Создаётся ДИВ с id=cpu_new_1 и все последующие дивы с таким же ид (((
Как сделать, чтобы остальные были с ид=...2, 3, и т.д.?
Заранее благодарю за ответ )))

рони · #2 (**permalink**) 28.03.2018, 23:03

angel026,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">


</head>

<body>
<div><div class="cpu_in"></div></div>
  <script>
function createNewDiv(i) {

    return function() {
    var cpu_in = document.getElementsByClassName("cpu_in")[0];
    var divCpu = document.createElement('div');
    divCpu.setAttribute('id', 'cpu_new_'+i);
    divCpu.innerHTML = "Новый ДИВ " + i;
    var parent = cpu_in.parentNode;
    parent.insertBefore(divCpu, cpu_in); //создаю ДИВ
    i++;
}


}
createNewDiv = createNewDiv(77);
createNewDiv()
createNewDiv()
createNewDiv()
  </script>
</body>
</html>

angel026 · #3 (**permalink**) 28.03.2018, 23:16

Работает!!! Только почему начало отсчета идет с -1?
и я убрал " return function() { " с этим мой код не хотел ваще работать

рони · #4 (**permalink**) 28.03.2018, 23:21

Сообщение от angel026

Работает!!! Только почему начало отсчета идет с -1?
и я убрал " return function() { " с этим мой код не хотел ваще работать

вам дали вкусное решение, зачем кактус есть?

angel026 · #5 (**permalink**) 28.03.2018, 23:28

Сообщение от рони

вам дали вкусное решение, зачем кактус есть?

Не понял?
В чем кактус? просто у меня обработчик события висит в php цикле, а JS код в другом файле, я полный профан в JS и по этому, видимо, ем кактус, но если скопировать Ваш вариант, функция не работает, а если убрать "return..." все начинает работать, только счет id начинается с -1.

рони · #6 (**permalink**) 28.03.2018, 23:29

angel026,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">


</head>

<body>
<div><div class="cpu_in"></div></div>
  <script>
var createNewDiv = function(i) {
  return function() {
    var cpu_in = document.getElementsByClassName("cpu_in")[0];
    var divCpu = document.createElement("div");
    divCpu.setAttribute("id", "cpu_new_" + i);
    divCpu.innerHTML = "Новый ДИВ";
    var parent = cpu_in.parentNode;
    parent.insertBefore(divCpu, cpu_in);
    i++;
  };
}(0);
createNewDiv()
createNewDiv()
createNewDiv()
  </script>
</body>
</html>

angel026 · #7 (**permalink**) 28.03.2018, 23:34

Епона

РАБОТАЕТ!!!
Спасибо!

Я и не знал, что так ваще можно )))) Крутяг!!!!!

Форум

Справочник

Discord чат

Курсы javascript