создать интерактивный список в html - PullRequest
Новая
       7

создать интерактивный список в html

0 голосов
/ 03 сентября 2018 
<ul id="add-message"></ul>

document.querySelector("#submit").onclick = () => {
  const li = document.createElement('li');
  li.innerHTML = document.querySelector('#message').value;
  document.querySelector('#add-message').append(li);       
};

<form>
  <input type="text" id="message">
  <input type="submit" id="submit">
</form>

проблема в том, что это может создать динамический список, но мне нравится делать его кликабельным чтобы создать всплывающее окно, щелкнув элемент списка.

Мне нужно что-то вроде этого 

 <div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>

показать, что пользователь может видеть, что это кликабельно, так как динамически добавлять атрибуты href и class

Ответы [ 3 ]

0 голосов
/ 03 сентября 2018

Вы можете добавить событие клика к вновь созданному li. Поскольку кнопка имеет тип submit, вы также должны запретить событию по умолчанию (event.preventDefault()) оставаться на странице: 

document.querySelector("#submit").onclick = (event)=>{
  const li = document.createElement('li');
  li.addEventListener('click', function(){
    console.log('You have clicked: ',this.textContent);
  });
  li.innerHTML = document.querySelector('#message').value;
  document.querySelector('#add-message').append(li);  
  event.preventDefault();
};
<ul id="add-message">

</ul>



<form>
  <input type="text" id="message">
  <input type="submit" id="submit">
</form>
0 голосов
/ 03 сентября 2018

Вам нужно запретить поведение по умолчанию input type = submit, а затем использовать event.target, чтобы получить содержимое от li при нажатии 

document.querySelector("#submit").onclick = (e) => {
  e.preventDefault();
  const li = document.createElement('li');
  li.innerHTML = document.querySelector('#message').value;
  document.querySelector('#add-message').append(li);
};

document.querySelector("#add-message").addEventListener('click', function(e) {
  console.log(e.target.innerHTML)

})
<ul id="add-message">

</ul>

<form>
  <input type="text" id="message">
  <input type="submit" id="submit">
</form>
0 голосов
/ 03 сентября 2018

Добавьте onclick на li перед добавлением к dom. 

<ul id="add-message">

 </ul>


document.querySelector("#submit").onclick = ()=>{
const li = document.createElement('li');
li.innerHTML = document.querySelector('#message').value;
li.onclick = function(){
console.log("clicked");
}
document.querySelector('#add-message').append(li);       

};

<form>
<input type="text" id="message">
<input type="submit" id="submit">
</form>
...