Question

我想要实现的是动态设置输入字段的占位符。我有一个输入，我说我想在表单中呈现多少输入。在创建的输入上，我设置了一个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

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

Answer 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循环第二次出现时，新的Placeholdee =“value1”，

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

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

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

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];
    }
}

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

1 个答案: