如何获得动态创建的滑块的价值？

时间：2019-06-13 08:08:41

标签： javascript

我一直在创建一个具有字母（az）值的滑块，当我移动该滑块时它会提供一个值，但是当我单击按钮创建第二个滑块并移动该第二个滑块时，它会一直保持给出第一个滑块的te值。 

<div id="target"></div>
</div>
<script>
  // Creating the Alphabet Array 

  var allTheLetters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P",
    "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
  ];
  var sliderParent = document.getElementById("target");
  var createSlider = document.createElement("input");
  var createTextInput = document.createElement("input");

  // Creating Letter Inputfield 
  createTextInput.type = "text";
  createTextInput.style.display = "block";
  sliderParent.appendChild(createTextInput);
  // End Creating letter inputfield

  // Creating button 

  var button = document.createElement("button");
  var sliderButtonId = document.getElementById("sliderButton");
  button.style.display = "block";
  button.id = "sliderButton";
  button.innerHTML = "Add new letter";

  // End creating Button


  // Creating slider and displaying it to the DOM


  createSlider.type = "range";
  createSlider.style.display = "block";
  createSlider.min = 0;
  createSlider.max = allTheLetters.length - 1;
  createSlider.defaultValue = 0;
  sliderParent.appendChild(createSlider);
  sliderParent.appendChild(button);

  // adding Eventlistner to clickbuttton
  document.addEventListener('click', function(e) {
    if (e.target && e.target.id == 'sliderButton') {
      return newSlider();
    }
  });
  // End adding eventlistener to clickbutton

  // Get the current value of the slider 
  function getMySliderResults() {

    var sliderResult = createSlider.value;
    var theLetterIWant = allTheLetters[sliderResult];
    console.log(theLetterIWant);
    return theLetterIWant;


  }


  // End getting the current value of the slider


  // Add eventlistener to the change of the slider

  document.addEventListener('change', function(event) {
    if (event.target.querySelectorAll("#target > input")) {
      return getMySliderResults();

    }
  });
  // End of adding eventlistener to the change of the slider

  function newSlider() {
    var sliderParent = document.getElementById("target");
    var createSlider = document.createElement("input");
    createSlider.type = "range";
    createSlider.style.display = "block";
    createSlider.min = 0;
    createSlider.max = allTheLetters.length - 1;
    createSlider.defaultValue = 0;
    sliderParent.appendChild(createSlider);
    sliderParent.appendChild(button);
  }
</script>

第一个滑块的值必须显示在文本输入中，然后在创建第二个滑块时，必须在文本输入的第一个滑块后面添加该值。这必须可以无限次。

2 个答案:

答案 0 :(得分：1)

根据@Alon Yampolski的回答，我完成了作业xD fiddleDemo

我做了什么：我为每个滑块分配了唯一的ID，以便知道要更改哪个滑块。基于此，我创建了一个数组来保存每个滑块的值，并且每次更改滑块时，都会更改数组中的值。

例如：我有2个滑块，因此数组将包含2个元素。如果我更改第一个滑块值，则数组中的第一个元素将具有新值

slider 1 value - E
slider 2 value - D
array will have ["E","D"]

// after the change

slider 1 value - O
slider 2 value - D
array will have ["O","D"]

每次添加新的滑块时，都会重新构建阵列

  

然后，当我创建第二个滑块时，必须在文本输入中的第一个滑块后面添加值。

为了符合此要求，我颠倒了整个字符串，因此输出将被array.ToString()颠倒

如果不清楚，请告诉我。

var allTheLetters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P",
                "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
            var sliderParent = document.getElementById("target");
            var createSlider = document.createElement("input");
            var createTextInput = document.createElement("input");
            var sliderIndex = 0;
            var arrOfLetters=[];
            
            
            createSlider.className  = "mySlider";
            createSlider.id= "slider_0";


						
            // Creating Letter Inputfield 
            createTextInput.id = "myInput"
            createTextInput.type = "text";
            createTextInput.style.display = "block";
            sliderParent.appendChild(createTextInput);

            // Creating button 
            var button = document.createElement("button");
            var sliderButtonId = document.getElementById("sliderButton");
            button.style.display = "block";
            button.id = "sliderButton";
            button.innerHTML = "Add new letter";


            // Creating slider and displaying it to the DOM
            createSlider.type = "range";
            createSlider.style.display = "block";
            createSlider.min = 0;
            createSlider.max = allTheLetters.length - 1;
            createSlider.defaultValue = 0;
            sliderParent.appendChild(createSlider);
            sliderParent.appendChild(button);

            // adding Eventlistner to clickbuttton
            document.addEventListener('click', function (e) {
                if (e.target && e.target.id == 'sliderButton') { 
                    sliderIndex++;
                    
                    // create an unique id for each slider with sliderIndex increased
                    newSlider(sliderIndex);
                    
                    arrOfLetters.length = 0;
                    var mySliders = document.querySelectorAll(".mySlider")
                    //create an array which will refelct values from each slider
                    mySliders.forEach((input) => {
                        arrOfLetters.push(getMySliderResults(input.value)); 
                        
                    });
                     
                }
            }); 

            // Get the current value of the slider 
            function getMySliderResults(sliderValue){
                var theLetterIWant = allTheLetters[sliderValue];
                return theLetterIWant;
            }


            // Add eventlistener to the change of the slider
	             document.addEventListener('change', function (event) { 
							
               //get the slider number based on id. ex: if event.target.id is slider_1 noOfSlider will be 1
               var noOfSlider = event.target.id.replace(/[^0-9]/g, '')
               //change the array element at specified position.. ex: because the first slider was changed, we will change the first number from array
                arrOfLetters[Number(noOfSlider)] = getMySliderResults(event.target.value);
               
               // make array as a string with the commas replaced
               var myString = arrOfLetters.toString().replace(/,/g , "")
               console.log("string in the top-down slider order: " + myString);
               
               // reverse string
               var reversedString = myString.split('').reverse().join('');
               
               document.getElementById("myInput").value = reversedString;

            });
            

            // End of adding eventlistener to the change of the slider
            function newSlider(sliderID) {
                var sliderParent = document.getElementById("target");
                var createSlider = document.createElement("input");
                createSlider.id = "slider_" + sliderID;
                createSlider.className  = "mySlider"
                createSlider.type = "range";
                createSlider.style.display = "block";
                createSlider.min = 0;
                createSlider.max = allTheLetters.length - 1;
                createSlider.defaultValue = 0;
                sliderParent.appendChild(createSlider);
                sliderParent.appendChild(button);
            }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div id="target"></div>
</div>

答案 1 :(得分：0)

问题出在这里

document.addEventListener('change', function(event) {
    if (event.target.querySelectorAll("#target > input")) {
      return getMySliderResults();

    }
  });

使用getMySliderResults（）方法时，应将从发出的事件获得的值传递给我们，如下所示：

document.addEventListener('change', function (event) { 
  if (event.target.querySelectorAll("#target > input")) {
    return getMySliderResults(event.target.value);
  }
});

然后在方法中使用此值：

function getMySliderResults(sliderValue){

  var theLetterIWant = allTheLetters[sliderValue];
  console.log(theLetterIWant);
  return theLetterIWant;
}


<div id="target"></div>
        </div>
        <script>
            // Creating the Alphabet Array 

            var allTheLetters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P",
                "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
            var sliderParent = document.getElementById("target");
            var createSlider = document.createElement("input");
            var createTextInput = document.createElement("input");

            // Creating Letter Inputfield 
            createTextInput.type = "text";
            createTextInput.style.display = "block";
            sliderParent.appendChild(createTextInput);
            // End Creating letter inputfield

            // Creating button 

            var button = document.createElement("button");
            var sliderButtonId = document.getElementById("sliderButton");
            button.style.display = "block";
            button.id = "sliderButton";
            button.innerHTML = "Add new letter";

            // End creating Button


            // Creating slider and displaying it to the DOM


            createSlider.type = "range";
            createSlider.style.display = "block";
            createSlider.min = 0;
            createSlider.max = allTheLetters.length - 1;
            createSlider.defaultValue = 0;
            sliderParent.appendChild(createSlider);
            sliderParent.appendChild(button);

            // adding Eventlistner to clickbuttton
            document.addEventListener('click', function (e) {
                if (e.target && e.target.id == 'sliderButton') {
                    return newSlider();
                }
            }); 
            // End adding eventlistener to clickbutton

            // Get the current value of the slider 
            function getMySliderResults(sliderValue){

                var theLetterIWant = allTheLetters[sliderValue];
                console.log(theLetterIWant);
                return theLetterIWant;


                }


            // End getting the current value of the slider


            // Add eventlistener to the change of the slider

             document.addEventListener('change', function (event) { 
                if (event.target.querySelectorAll("#target > input")) {
                    return getMySliderResults(event.target.value);

                }
            }); 
            // End of adding eventlistener to the change of the slider

            function newSlider() {
                var sliderParent = document.getElementById("target");
                var createSlider = document.createElement("input");
                createSlider.type = "range";
                createSlider.style.display = "block";
                createSlider.min = 0;
                createSlider.max = allTheLetters.length - 1;
                createSlider.defaultValue = 0;
                sliderParent.appendChild(createSlider);
                sliderParent.appendChild(button);
            }
            </script>

相关问题
最新问题