Почему новые элементы списка не отображаются в отдельных строках? - PullRequest
Новая
       1

Почему новые элементы списка не отображаются в отдельных строках?

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

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

соответствующий HTML: 

<body>
<h1>
    <strong>TO DO LIST</strong>
</h1>
<input type="text" id="newitem" placeholder="enter item name">
<button id="btn" type="button" onclick="add();" >ADD ITEM</button>
<h2>
    undone: <br>click on required items to move them to done list
</h2>
<ul id="dolist">

</ul>
<h2>
    done: <br>click on required items to move them back to undone list
</h2>
<ul id="donelist">


</ul>

<script type="text/javascript" src="jsfunc.js"></script>
</body>

`JavaScript: 

var dolist=document.getElementById('dolist');
function add()
{
var item=document.createElement("item");
var val=document.getElementById("newitem").value;

var t=document.createTextNode(val);
item.appendChild(t);
dolist.appendChild(item);

}

1 Ответ

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

Вы, вероятно, имели в виду li вместо item. item не является допустимым элементом HTML, в то время как li указывает элемент списка - для упорядоченных списков ol и неупорядоченных списков ul. 

var dolist = document.getElementById('dolist');

function add() {
  var item = document.createElement("li");
  var val = document.getElementById("newitem").value;

  item.textContent = val;
  dolist.appendChild(item);
}
<h1>
  <strong>TO DO LIST</strong>
</h1>
<input type="text" id="newitem" placeholder="enter item name">
<button id="btn" type="button" onclick="add();">ADD ITEM</button>

<h2>
  undone: <br>click on required items to move them to done list
</h2>
<ul id="dolist">
</ul>

<h2>
  done: <br>click on required items to move them back to undone list
</h2>
<ul id="donelist">
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...