以动态形式替换输入的占位符答案

【问题标题】：Replace placeholder of an input in a dynamic form以动态形式替换输入的占位符
【发布时间】：2018-03-01 01:58:30
【问题描述】：

我想要实现的是动态设置输入字段的占位符。我有一个输入，我说我想在表单中呈现多少输入。在创建的输入上，我设置了一个 onchange 事件：

function inputOnchange (){
    setTimeout(function(){

        var createdInputs = document.querySelectorAll("*[class^='createInput']");

        createdInputs.forEach( function(item){
            item.onchange = function() {
                changeFormPlaceholder();
            }
        })

    }, 200);
}

如你所见，当函数下方触发 onchange 事件时，它会运行一个函数：

function changeFormPlaceholder(){

    var inputs = document.querySelector('.formFieldInputs');
    var num = 0;
    var valueArray = {};

    inputs.childNodes.forEach( function(input){
        var inputValue = input.value;
        var name = 'value' + num++;
        valueArray[name] = inputValue;
    })

    for( var newPlaceholder in valueArray ){

        if(valueArray.hasOwnProperty(newPlaceholder)){

            console.log("newPLH", newPlaceholder, valueArray[newPlaceholder])

            var form = document.querySelectorAll("*[class^='exitIntentInput']");

            for(var i = 0; i < form.length; ++i){
                    // console.log("aaraay", form[i].placeholder);
                form[i].placeholder = valueArray[newPlaceholder];
            }
        }
    }
}

现在它仅在最后一个输入字段上更改，并将所有输入字段设置为第二个值。

那么如何单独更改它们？

这是FIDDLE

在侧边栏的输入中输入一些内容，您会看到它们出现在右侧，现在更改左侧的输入值，您会看到我的问题

【问题讨论】：

您是否打算在输入发生更改时更新所有输入？
您应该真正将演示简化为与此问题相关的内容。很吵。
没有顺序，所以当第一次更改时，第一个输入占位符必须更改
那你为什么要选择它们并运行forEach？也许 HTML sn-p 可以解决问题。

标签： javascript

【解决方案1】：

你在另一个 for 循环中运行一个 for 循环，

for( var newPlaceholder in valueArray ){
    if(valueArray.hasOwnProperty(newPlaceholder)){
        console.log("newPLH", newPlaceholder, valueArray[newPlaceholder])
        var form = document.querySelectorAll("*[class^='exitIntentInput']");
        for(var i = 0; i < form.length; ++i){
                // console.log("aaraay", form[i].placeholder);
            form[i].placeholder = valueArray[newPlaceholder];
        }
    }
}

而外层for循环第二次的时候，new Placeholdee="value1",

for(var i = 0; i < form.length; ++i)
  // console.log("aaraay", form[i].placeholder);
  form[i].placeholder = valueArray[newPlaceholder];
}

然后内部循环会将表单的所有索引的占位符设置为 valueArray["value1"]，即输入的最后一个值。

解决这个问题最简单的方法就是将var valueArray声明为一个数组但是对象。因此无需运行两次 for 循环。代码如下：

function changeFormPlaceholder(){
    var inputs = document.querySelector('.formFieldInputs');
    var num = 0;
    var valueArray = [];

    inputs.childNodes.forEach( function(input){
        var inputValue = input.value;
        var name = 'value' + num++;
        valueArray.push(inputValue);
    })

    var form = document.querySelectorAll("*[class^='exitIntentInput']");
    for(var i = 0; i < form.length; ++i){
        // console.log("aaraay", form[i].placeholder);
        form[i].placeholder = valueArray[i];
    }
}

【讨论】：