通过javascript更改输入值

我正在尝试通过javascript更改输入值。一切工作正常并且输入值在此的jsfiddle成功地改变 - http://jsfiddle.net/webvitaly/dbv0vuhz/6/通过javascript更改输入值

(function() { 
    function form_init() { 

     var elements, 
     len, 
     i; 

     elements = document.querySelectorAll('.input'); 
     len = elements.length; 
     for (i = 0; i < len; i++) { 
      elements[i].value = 'new value'; 
      console.log(elements); 
      console.log(elements[i].value); 
     } 

     var dynamic_control = '<input type="text" class="input-dynamic" value="dynamic value" />'; 

     elements = document.querySelectorAll('form'); 
     len = elements.length; 
     for (i = 0; i < len; i++) { 
      //elements[i].innerHTML += dynamic_control; 
     } 

    }; 

    if (document.addEventListener) { 
     document.addEventListener('DOMContentLoaded', form_init, false); 
    } 

    setTimeout(function() { // set 1 second timeout 
     form_init(); 
    }, 1000); 
})();

但是，当我试图另一个输入添加到窗体通过javascript前面的代码不工作，输入值没有改变 - http://jsfiddle.net/webvitaly/dbv0vuhz/5/

你能告诉我我做错了什么吗？

来源

2015-09-27 webvitaly

您违反了HTML结构。您在第一个输入的输入标记内添加动态输入标记，这根本没有意义。您必须将其添加到封闭表单中，或者更好地_append_它到现有的输入标记。我想你看到的是浏览器的一个人工制品，试图重建一个有效的标记。 – arkascha

你必须把所有的代码放在 – smnbbrv

第一input的HTML结构仍value="old value"，您可以通过JS设置新值，更新DOM，但在HTML它仍然有“旧价值”，所以，当你做到这一点 -

elements[i].innerHTML += dynamic_control; // concatenate with the input "old value" in html because in markup it's old value

新值不会出现，因为在HTML中它的“旧值”

希望您明白我的意思，如果您没有，那么只需右键单击每个小提琴输入，然后单击浏览器中的检查元素，即可会在标记中看到value =“old value”并在第一个小提琴中显示“new value”。 .innerHTML获取HTML标记，然后连接并最终追加它。

UPDATE：创建input根据自己的需要将是正确的方法 -

/* create input element this way */ 
var dynamic_control = document.createElement('input'); 
dynamic_control.setAttribute('type', 'text'); 
dynamic_control.setAttribute('class', 'input-dynamic'); 
dynamic_control.setAttribute('value', 'dynamic value'); 

elements = document.querySelectorAll('form'); 
len = elements.length; 
for (i = 0; i < len; i++) { 
    elements[i].appendChild(dynamic_control); // append the input element as a child of elements[i] 
}

使用appendChild()而不是innerHTML。

Working Fiddle!

来源

2015-09-27 08:13:59

的问题里面。对不起，不能跟着你。为什么这应该是相关的？ OP在第二个循环中处理表单中的所有元素。不管它们的价值如何。你的意思是第一个输入标签是由于连接而重新添加的？ – arkascha

@arkascha是啊它在第二个循环中被重新处理，第一个被破坏..你是对的！ –

@RohitKumar谢谢你的回答。那么将输入添加到表单中的正确方法是什么？ – webvitaly

通过javascript更改输入值

回答

相关问题