Display slider when you hover over array elements and give value to the array elements-CodePudding

I have done the part where you have to generate the array elements when you enter them from textbox, what I struggle with now is to display a slider on hover over each array element and give the array element a value, also what I struggle with is to delete each generated array element individually, my delete function deletes the entire array on click not just the single element I click.

Here is how it should look like: enter image description here

Here is my code so far:

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>

CodePudding user response：

I am not being rude I just got confused on how you stated your message but what I think you are saying is to do this:

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
     }  
  })
}

CodePudding user response：

I have tried to implement something that i hope it's close to what are you looking for:

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)
    }

You can try it by yourself in this codepen