<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/css.css">
<title>Document</title>
</head>
<body>
<div id="center">
<p>
<b>Text</b>
<input type="text" id="click_text">
<b>Color</b>
<input type="text" id="text_color">
<b>Marker</b>
<select name="" id="marker">
<option value="">disc</option>
<option value="">disc</option>
<option value="">disc</option>
<option value="">disc</option>
<option value="">disc</option>
</select>
</p>
<input id="btn-run" onclick="pow2()" value="Create" type="submit">
<input value="Change current" type="submit">
<input value="delete current" type="submit">
<ul id="li_app">
</ul>
<script src="js/script.js"></script>
</body>
</html>function pow2() {
var text_color = document.getElementById("text_color").value;
var click_text = document.getElementById("click_text").value;
var li = document.createElement('LI');
li.style.color = text_color;
var textnode = document.createTextNode(click_text);
li.appendChild(textnode);
document.getElementById("li_app").appendChild(li);
}
document.getElementById("btn-run").addEventListener("click");
<p>
<b>Text</b>
<input type="text" id="text">
<b>Color</b>
<input type="text" id="color">
</p>
<button id="create">create</button>
<button id="update">update</button>
<button id="del">delete</button>
<ul id="items"></ul>.active {
border: 2px solid black;
}const
[ items, text, color, create, update, del ] =
[ 'items', 'text', 'color', 'create', 'update', 'del' ]
.map(n => document.getElementById(n));
create.addEventListener('click', () => {
items.insertAdjacentHTML('beforeend', `<li style="color: ${color.value}">${text.value}</li>`);
updateForm('', '');
});
update.addEventListener('click', () => ifActive(a => {
a.innerText = text.value;
a.style.color = color.value;
}));
del.addEventListener('click', () => ifActive(a => a.remove()));
items.addEventListener('click', e => {
const item = e.target.closest('li');
if (item) {
ifActive(a => item !== a && a.classList.remove('active'));
item.classList.toggle('active');
ifActive(a => updateForm(a.innerText, a.style.color));
}
});
function ifActive(f) {
const active = items.querySelector('.active');
active && f(active);
}
function updateForm(textVal, colorVal) {
text.value = textVal;
color.value = colorVal;
}