He hecho la parte en la que tienes que generar los elementos de la matriz cuando los ingresas desde el cuadro de texto, lo que me cuesta ahora es mostrar un control deslizante sobre cada elemento de la matriz y darle un valor al elemento de la matriz, también lo que me cuesta es para eliminar cada elemento de matriz generado individualmente, mi función de eliminación elimina toda la matriz al hacer clic, no solo en el único elemento en el que hago clic.
Así es como debería verse: ingrese la descripción de la imagen aquí
Aquí está mi código hasta ahora:
let names = []; let nameInput = document.getElementById("name"); let messageBox = document.getElementById("display"); 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; } <div class="container"> <form> <h1>Enter Search</h1> <input id="name" type="text" /> <input type="button" value="Search" onclick="insert()" /> </form> <br/> <div onclick="remove(this)" id="display"></div> <br/> <label >You have Selected: </label> <h3 id="labelprint"></h3> </div>No estoy siendo grosero, simplemente me confundí sobre cómo expresaste tu mensaje, pero lo que creo que estás diciendo es que hagas esto:
var names = []; var nameInput = document.getElementById("name"); var messageBox = document.getElementById("display"); function insert ( ) { names.push( nameInput.value ); // add value to array val: names[names.length - 1] = PutValueHere clearAndShow(); } function remove(this){ document.getElementById("display").parentNode.firstChild.remove(); // If you want it to remove the last child with the id 'display' then do .parentNode.lastChild.remove() //if you are trying to remove the last val in the array do this: names.splice(names.length-1,1) for the first do this names.splice(0,1) } function clearAndShow () { var printd="" nameInput.value = ""; messageBox.innerHTML = ""; names.forEach(function(element){ if(element != ''){ var _span = document.createElement('span'); _span.id = '_spanId' $('_spanId').css('border-style',solid'); $('_spanId').css('border-color',blue'); $('_spanId').css('width',50+'px'); $('_spanId').css('margin-left',5+'px'); _span[0].appendChild(document.createTextNode(element)) messageBox[0].appendChild(_span) printd += "''" + element + "'', "; document.getElementById("labelprint").innerHTML = printd } }) }He intentado implementar algo que espero que se acerque a lo que estás buscando:
HTML:
<div class="container"> <form> <h1>Add new slider</h1> <input id="sliderName" type="text" /> <input type="button" value="Add" onclick="insertSlider()" /> </form> <div id="display"></div> </div>CSS:
h3 { color: rgb(0, 174, 255); } .container { border: solid 2px; display: block; margin-left: 200px; margin-right: 200px; margin-top: 50px; }JS:
let messageBox = document.getElementById("display"); function deleteFn(id) { const element = document.getElementById(id) if(element) element.outerHTML=""; } function onChangeSlideId(id){ const elementSlide = document.getElementById('slider-'+id+'') if(elementSlide){ const value = elementSlide.value const elementSlideText = document.getElementById('slider-value-'+id+'') elementSlideText.innerText = '('+value+')' } } function insertSlider(){ const name = document.getElementById("sliderName") const nameValue = name.value const newLabel = document.createElement('label') newLabel.setAttribute('for',nameValue) newLabel.innerText = nameValue const newSlider = document.createElement('input') newSlider.setAttribute('id','slider-'+nameValue+'') newSlider.setAttribute('type','range') newSlider.setAttribute('name',nameValue) newSlider.setAttribute('onchange','onChangeSlideId("'+nameValue+'")') const sliderValue = document.createElement('span') sliderValue.setAttribute('id','slider-value-'+nameValue+'') sliderValue.innerText = '('+newSlider.value+')' const newContainer = document.createElement('div') newContainer.setAttribute('id',nameValue) newContainer.setAttribute('style','display: grid') newContainer.appendChild(newSlider) newContainer.appendChild(newLabel) newContainer.appendChild(sliderValue) const newDeleteButton = document.createElement('input') newDeleteButton.setAttribute('type', 'button') newDeleteButton.setAttribute('value', 'Delete ' + nameValue + '') newDeleteButton.setAttribute('onclick', 'deleteFn("'+nameValue+'")') newContainer.appendChild(newDeleteButton) messageBox.appendChild(newContainer) }Puedes probarlo tú mismo en este codepen