Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.08.2016, 22:04
Новичок на форуме
Отправить личное сообщение для Mi_Denis Посмотреть профиль Найти все сообщения от Mi_Denis
 
Регистрация: 19.08.2016
Сообщений: 2

DOM(Привязка элем-ов)
Пишу "todo list". Столкнулся с проблемой: когда есть две и больше панели задач, при нажатии "add" элементы списка задач присваиваются к самой первой панели. Что нужно для того, чтоб при нажатии "add" каждый элемент списка присваивался к своей панели?

<!DOCTYPE html>
<html>

  <head>

<link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
    <title> todo lists </title>
 </head>

<body id = "insert">


  <button id="btn" onclick="create()">Create new</button>
  <div id="second"></div>

[JS]<script type="text/javascript">
function create(){
   var newDiv = document.createElement('div');
   newDiv.innerHTML = '<div id="panel-1"><input id="input"><button id ="button-1" onclick="add()"> add! </button></input></div>';
   document.getElementById("insert").appendChild(newDiv);
}
 function add(){
    var newDiv2= document.createElement('div');
    newDiv2.innerHTML = '<div id="body"><div id="footer"></div></div>';
    document.getElementById("panel-1").parentNode.appendChild(newDiv2);
}

</script>[/JS]


</body>
</html>


P.S.
Для детализации прикрепил миниатюру.
Изображения:
Тип файла: jpg Снимок.JPG (66.9 Кб, 9 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 19.08.2016, 22:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Mi_Denis,
<!DOCTYPE html>
<html>

  <head>

<link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
    <title> todo lists </title>
 </head>

<body>


<button class="btn">Create new</button>

<script type="text/javascript">
document.querySelector('.btn').addEventListener('click', create, false)
function create(){
   var Div = document.createElement('div');
   var panel =  document.createElement('div');
   panel.className = 'panel';
   var input =  document.createElement('input');
   var button =  document.createElement('button');
   button.textContent = 'add!';
   button.addEventListener('click', function() {
   var newDiv = document.createElement('div');
   newDiv.innerHTML = '<div class="body">body<div class="footer">footer</div></div>';
   Div.appendChild(newDiv);
           });
   panel.appendChild(input);
   panel.appendChild(button);
   Div.appendChild(panel)
   document.body.appendChild(Div);

}
</script>


</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 19.08.2016, 23:49
Новичок на форуме
Отправить личное сообщение для Mi_Denis Посмотреть профиль Найти все сообщения от Mi_Denis
 
Регистрация: 19.08.2016
Сообщений: 2

Большое спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск