Javascript getElementById在Id更改时中断

此代码接受输入的10位电话号码，并对其进行格式化，以便数据库中的所有条目都遵循相同的格式。代码按原样工作，但问题是HTML是动态生成的，Id会更改。它总是以“phone”开头，但添加了数字和破折号，这会破坏代码（例如phone-59-0-1），“name”和“class”保持不变，但我似乎无法使用这些元素使其正常工作

<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>

---

尝试使用：document.getElementsByName（“电话”）[0]

这意味着您正试图访问函数document.getElementsByName（“电话”）给定的数组的第一个元素

---

这样，您就不必担心元素的id。

我有点同意Barmar的观点，但我做了一个快速搜索，已经有了一个可行的解决方案：

他们使用

querySelectorAll

和一些通配符来获取您想要的内容（而不是

getElementById

）。

简单地执行以下操作：

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

var x=document.getElementsByClassName（“电话”）；
对于（变量i=0；i

更改：

var obj = document.getElementsByClassName("ee-reg-page-questions ee-reg-page-text-input  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];
    }
}

---

为什么不使用类并使用

GetElementsByCassName（）

？如果没有办法知道ID是什么，为什么还要麻烦给它一个ID？我已经尝试过了，它不起作用。我怀疑你做错了，显示你的代码。一个常见的错误是忘记为结果编制索引，因为它返回的是一个集合，而不是一个元素。下面是我在JSFIDLE上使用的全部代码块，我也看到了这一点，但我对JavaScript不是很在行，需要一些帮助才能使用现有的代码。

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

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