通過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更改輸入值

回答

相關問題