У меня есть <div>коробки с тем же классом с кнопками. При нажатии кнопки текстовое поле должно быть добавлено в соответствующее поле - PullRequest
0 голосов
/ 04 мая 2020

При нажатии второй кнопки «Добавить задание», текстовое поле должно быть добавлено ко второму div, аналогично 3-му, 4-му Как мне обратиться к определенному элементу div? То, что я сделал ниже, добавляет текстовые поля к первому элементу независимо от того, какая кнопка нажата.

HTML

<body>
    <div id="project">
      LIST IT
    </div>
    <div id="board">
      Java Project
    </div>
  <template id="listTemp">
    <form class="frm" >
      <input type="text" placeholder="Enter list name">
    </form>
    <button type="button" name="task" class="lst btn btn-secondary" onclick="addTask()">Add Task</button>
  </template>
    <button type="button" name="list" class="btn btn-secondary" onclick="addList()">Add List</button>
  </body>
  <script src="index.js" charset="utf-8"></script>

JAVASCRIPT

function addTask(){
  var input = document.createElement('input');
  input.placeholder="Enter task here";
  input.type="text";
  var br = document.createElement('br');
  var parent = document.getElementsByClassName('frm')[0];
  // parent.insertBefore(input,document.getElementsByClassName('lst')[0]);
  parent.appendChild(input);

}
function addList(){
  var div = document.createElement('div');
  div.innerHTML = document.getElementById('listTemp').innerHTML;
  div.className = 'ListBox';
  document.getElementsByTagName('body')[0].appendChild(div);
}

1 Ответ

0 голосов
/ 04 мая 2020

Для ссылки на проект div # вы можете использовать document.querySelector ('# project');

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...