Question

我想制作一种类似于以下形式的表格：

https://i.stack.imgur.com/qgZ9j.gif

重点是复制范围滑块以选择字母，然后将字母自动加到主输入字段中。每个带有新滑块的新字母选择都会在输入字段中添加一个额外的字母。

我已经尝试过clone()，但是当然每个新滑块都获得第一个滑块的值，所以它没有帮助。现在，我已经将滑块定义为函数，并且每次单击按钮时都会调用该函数。但是新的滑块会替换主输入字段中前一个的值。除了ID为“ target”的div之外，没有其他HTML。这是我的Javascript代码：

var target = document.getElementById('target');

// Instruction
var instruction = document.createElement('p');
    instruction.innerHTML = 'Enter your first name:';
    target.appendChild(instruction);

// Input for name
var letterInput = document.createElement('input');
    letterInput.setAttribute("type", "text");
    letterInput.id = 'letterInput';
    target.appendChild(letterInput);

    letterInput.addEventListener("focus", show);

// Create slider and its output
function addSlider() {

    // Slider + output container
    var letterSpan = document.createElement("span");
        letterSpan.id = "letterSpan";
        letterSpan.className = "mt-3";
        letterSpan.style.display = "block";
        target.appendChild(letterSpan);

    // Letter output
    var outputSlider = document.createElement("input");
       outputSlider.setAttribute('type', 'text');
       outputSlider.id = "outputSlider";
       outputSlider.style.border = "0";
        outputSlider.style.width = "25px";
       outputSlider.innerHTML = outputSlider.value;
       letterSpan.appendChild(outputSlider);

    // Slider
    var sliderContainer = document.createElement("span");
       sliderContainer.id = "sliderContainer";
       sliderContainer.style.backgroundColor = "grey";
       sliderContainer.style.height = "10px";
       sliderContainer.style.width = "300px";
       letterSpan.appendChild(sliderContainer);

    var sliderLetter = document.createElement('input');
       sliderLetter.setAttribute('type', 'range');
       sliderLetter.className = 'range-slider-handle';
       sliderLetter.id = 'sliderLetter';
       sliderLetter.min = 0;
       sliderLetter.max = 25;
       sliderLetter.value = 0;
       sliderLetter.style.width = "300px";
       sliderLetter.style.height = "5px";
       sliderLetter.innerHTML = sliderLetter.value;
       sliderContainer.appendChild(sliderLetter);
       sliderContainer.addEventListener("change", updateValue);

    // Update letter when using the slider
    function updateValue(event) {
        outputSlider.value = String.fromCharCode(parseInt(sliderLetter.value) + 65);
        letterInput.value = String.fromCharCode(parseInt(sliderLetter.value) + 65);
    }
}

// Button
var addLetter = document.createElement('button');
    addLetter.id = 'addLetter';
    addLetter.className = 'btn btn-secondary mt-3';
    addLetter.style.display = 'block';
    addLetter.innerHTML = 'Add letter';
    addLetter.style.display = "block";
    target.appendChild(addLetter);
    addLetter.addEventListener('click', addNewLetter);

// Show slider when click in name field
function show(event) {
    addSlider();
}

// Add new letter
function addNewLetter() {
    addSlider();
}

任何人都可以给我关于寻找什么的线索吗？我不一定需要答案，只是一些提示，指出出了什么问题以及如何解决该问题。

2个要求，但是：我不允许触摸HTML，它必须是纯JavaScript。

编辑：有关信息，这是一个练习。它知道这不是在输入字段中添加字母的最佳方法，而只是学习Javascript。 :-)

Answer 1

In your function updateValue(event), change the second line to this:

letterInput.value += String.fromCharCode(parseInt(sliderLetter.value) + 65);
// added +=

Add each new letter to the input field rather than replace each letter in the input field. Hope this helps.

重复范围滑块

1 个答案: