#javascript #html #jquery #css
Вопрос:
Мне нужно вставить строковые значения из текстового поля и передать им значения из слайдера, и значение должно быть сохранено в строковых элементах, и все это должно выглядеть следующим образом:
**
let names = []; let nameInput = document.getElementById("name"); let messageBox = document.getElementById("display"); var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); output.innerHTML = slider.value; slider.oninput = function() { output.innerHTML = this.value; } function insert() { names.push(nameInput.value); clearAndShow(); } function remove() { var element = document.getElementById("display"); element.parentNode.removeChild(element); } function clearAndShow() { let printd = "" nameInput.value = ""; messageBox.innerHTML = ""; names.forEach(function(element) { if (element != '') { var _span = document.createElement('span'); _span.style.borderStyle = "solid" _span.style.borderColor = "blue" _span.style.width = '50px' _span.style.marginLeft = "5px" _span.appendChild(document.createTextNode(element)) messageBox.appendChild(_span) printd = "''" element "''" "," " "; document.getElementById("labelprint").innerHTML = (printd) } }) }
h3 { color: rgb(0, 174, 255); } .container { border: solid 2px; display: block; margin-left: 200px; margin-right: 200px; margin-top: 50px; } .slider { display: none; } .demospan { display: none; } .display:hover .slider { display: block; color: red; }
lt;div class="container"gt; lt;formgt; lt;h1gt;Enter Searchlt;/h1gt; lt;input id="name" type="text" /gt; lt;input type="button" value="Search" onclick="insert()" /gt; lt;/formgt; lt;br/gt; lt;div onclick="remove(this)" id="display"gt;lt;/divgt; lt;input type="range" min="1" max="100" value="1" class="slider" id="myRange"gt; lt;span class="demospan" id="demo"gt;lt;/spangt; lt;br/gt; lt;br/gt; lt;labelgt;You have Selected: lt;/labelgt; lt;h3 id="labelprint"gt;lt;/h3gt; lt;/divgt;
**
Что я не знаю, как сделать, так это как удалить элементы по отдельности и добавить значение для каждого элемента, вставленного с помощью ползунка. Нужно ли мне полностью изменить свой подход или небольшие изменения в моем коде могут обеспечить необходимые функциональные возможности.