的getElementById打破時，ID改變

這段代碼使用真實進入一個10位數的電話號碼，並將其格式化，以便對數據庫中的所有條目遵循相同的格式。代碼按原樣運行，但問題在於HTML是動態生成的，並且Id發生了變化。它總是以「手機」開始，但數字和連加入打破了代碼（例如，電話59-0-1）「名稱」和「類」保持不變，但我似乎無法得到它的工作使用這些元素。的getElementById打破時，ID改變

<form name="registration_form" id="registration_form"> 
<input type="text" name="phone" id="phone" class="ee-reg-page-questions ee-reg-page-text-input phone" /> 
</form> 

<script> 
var x = document.getElementById("phone"); 
x.addEventListener("blur", formatPhone, true); 


function formatPhone() { 
var obj = document.getElementById("phone"); 
var numbers = phone.value.replace(/\D/g, ''), 
    char = {0:'(',3:') ',6:'-'}; 
    obj.value = ''; 
    for (var i = 0; i < numbers.length; i++) { 
    obj.value += (char[i]||'') + numbers[i]; 
    } 
} 
</script>

下面是一個使用getElementByClassName嘗試：

function formatPhone() { 
    var obj = document.getElementsByClassName("ee-reg-page-questions ee-reg-page-text-input phone")[0]; 
    var numbers = phone.value.replace(/\D/g, ''), 
     char = {0:'(',3:') ',6:'-'}; 
    obj.value = ''; 
    for (var i = 0; i < numbers.length; i++) { 
     obj.value += (char[i]||'') + numbers[i]; 
    } 
}

來源

2014-09-13 DSWebber

爲什麼不使用類和使用' getElementsByClassName方法（）'？ – Barmar 2014-09-13 19:56:39

如果沒有辦法知道身份證是什麼，爲什麼還要打擾給它一個ID？ – Barmar 2014-09-13 19:57:37

我試過了，它不會工作。 – DSWebber 2014-09-13 21:17:11

變化：

var obj = document.getElementsByClassName("ee-reg-page-questions ee-reg-page-text-input phone")[0];

到：

var obj = document.getElementsByClassName("phone")[0];

的功能只需要一個單獨的類，不包含的所有類的字符串元件。

整個代碼應該是：

var x = document.getElementsByClassName("phone")[0]; 
x.addEventListener("blur", formatPhone, true); 

function formatPhone() { 
    var obj = document.getElementsByClassName("phone")[0]; 
    var numbers = obj.value.replace(/\D/g, ''), 
     char = {0:'(',3:') ',6:'-'}; 
    obj.value = ''; 
    for (var i = 0; i < numbers.length; i++) { 
     obj.value += (char[i]||'') + numbers[i]; 
    } 
}

FIDDLE

如果你只是想有三個類的元素，使用：

var obj = document.querySelector(".ee-reg-page-questions.ee-reg-page-text-input.phone");

來源

2014-09-13 21:50:03 Barmar

你搖滾！非常感謝！！！ – DSWebber 2014-09-13 22:05:44

使用try：document.getElementsByName（「手機」）[0];

這意味着您試圖訪問由功能document.getElementsByName（「手機」）給定數組的第一個元素。

通過這個你不必wory約元素的ID。

來源

2014-09-13 20:00:31 Pulkit

這並不是一個很好的解決方案... – bitoiu 2014-09-13 20:02:31

我還挺Barmar同意，但我做了快速搜索，並沒有對SO已經是一個可行的解決方案：Can you use a wildcard in getElementById?

他們使用querySelectorAll和一些外卡給你想要的（而不是getElementById）得到什麼。

來源

2014-09-13 20:03:53 lucusp

我看到還有，但我不是很好用JavaScript，並且需要一些幫助得到那個與合作現有的代碼，我有。 – DSWebber 2014-09-13 21:19:19

簡單的做到這一點：

var x = document.getElementsByClassName("phone"); 

for (var i = 0; i < x.length; i++) { 
    x[i].addEventListener("blur", function() { 
     var obj = this, 
      numbers = obj.value.replace(/\D/g, ''), 
      char = { 
       0: '(', 
       3: ') ', 
       6: '-' 
      }; 

     obj.value = ''; 

     for (var i = 0; i < numbers.length; i++) { 
      obj.value += (char[i] || '') + numbers[i]; 
     } 
    }, true); 
}

來源

2014-09-13 20:05:37 felipekm

的getElementById打破時，ID改變

回答

相關問題