AppendChild к JS динамически созданному элементу без избыточного кода - PullRequest
Новая
       1

AppendChild к JS динамически созданному элементу без избыточного кода

0 голосов
/ 07 октября 2018

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

Мой текущий код может добавлять (x) только к существующим элементам.Я следовал следующему уроку, но я думаю, что способ добавления (x) к существующим элементам и новым элементам ввода избыточен.(обратите внимание, что он в основном использует "var span = document.createElement (" SPAN "); ..." дважды.

Есть ли способ, которым я могу добавить (x) в конце ко всем элементам li вдокумент? 

// Create a "close" button and append it to each list item
var allListItems = document.getElementsByTagName("li");

function appendClose(x){
	var close = document.createElement("span");
	var text = document.createTextNode("(\u00D7)");
	close.appendChild(text);
	return x.appendChild(close);
}
// Turn object into array.
const peopleArray = Object.keys(allListItems).map(i => allListItems[i]);
console.log(peopleArray);
peopleArray.map(appendClose);


// Create new list item after button click. 
function createNewElement(){
	var li = document.createElement("li"); // create <li>
	var v_userInput = document.getElementById("myInput");
	var content = document.createTextNode(v_userInput.value);
	li.appendChild(content);
	document.getElementById("myUL").appendChild(li);

	document.getElementById("myInput").value = ""; //fresh the input box;

};
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Work to-do</title>
</head>

<body>
<h1> Work to-do </h1>


<div id="myDiv">
	<input id="myInput" type="text" placeholder="New item..." maxlength="27">
	<button id="enter" onclick="createNewElement()">Add</button>
</div>

<ul id="myUL">
	<li>Gym</li>
	<li>Food</li>
</ul>


</body>
<script type="text/javascript" src="7_todo.js"></script>
</html>

1 Ответ

0 голосов
/ 07 октября 2018

Вам просто нужно написать еще одну строку внутри createNewElement(), чтобы сделать это:

appendClose(li);

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

// Create a "close" button and append it to each list item
var allListItems = document.getElementsByTagName("li");

function appendClose(x){
	var close = document.createElement("span");
	var text = document.createTextNode("(\u00D7)");
	close.appendChild(text);
	return x.appendChild(close);
}
// Turn object into array.
const peopleArray = Object.keys(allListItems).map(i => allListItems[i]);
// console.log(peopleArray);
peopleArray.map(appendClose);


// Create new list item after button click. 
function createNewElement(){
	var li = document.createElement("li"); // create <li>
	var v_userInput = document.getElementById("myInput");
  
  // Prevents empty task in todo list
  if(v_userInput.value.length === 0) {
    alert('Enter something!');
    return ;
  }
  
	var content = document.createTextNode(v_userInput.value);
	li.appendChild(content);
        appendClose(li); // Edited here
	document.getElementById("myUL").appendChild(li);

	document.getElementById("myInput").value = ""; //fresh the input box;

};
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Work to-do</title>
</head>

<body>
<h1> Work to-do </h1>


<div id="myDiv">
	<input id="myInput" type="text" placeholder="New item..." maxlength="27">
	<button id="enter" onclick="createNewElement()">Add</button>
</div>

<ul id="myUL">
	<li>Gym</li>
	<li>Food</li>
</ul>


</body>
<script type="text/javascript" src="7_todo.js"></script>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...