getElementById breaks when Id changes

Question

This code takes a 10 digit phone number that's entered and formats it so that all entries to the DB follow the same format. The code works as it is but the problem is that the HTML is generated dynamically and the Id changes. It always starts with "phone" but numbers and dashes are added which breaks the code (ex. phone-59-0-1) The "name" and "class" stay the same but I can't seem to get it to work using those elements.

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

Here's the attempt using 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];
    }
}

Why do you even bother giving it an ID if there's no way to know what the ID will be? — Barmar, Sep 13 '14 at 19:57
I suspect you did it wrong, show your code. A common mistake is to forget to index the result, since it returns a collection, not a single element. — Barmar, Sep 13 '14 at 21:18
Here's the entire block of code I'm working with on JSfiddle http://jsfiddle.net/Dm4Jv/1111/ — DSWebber, Sep 13 '14 at 21:29
I don't see a call to `getElementsByClassName()` in that code. — Barmar, Sep 13 '14 at 21:31
Sorry, my recent changes didn't save for some reason. Let me see if I can get you another link or post it all here. — DSWebber, Sep 13 '14 at 21:36

score 2 · Accepted Answer · answered Sep 13 '14 at 21:50

Change:

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

to:

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

The function just takes a single class, not a string containing all the classes of the element.

The whole code should be:

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

If you only want the element that has all three classes, use:

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

score 0 · Answer 2 · answered Sep 13 '14 at 20:00

0

Try using: document.getElementsByName("phone")[0];

This means you are trying to access first element of array given by function document.getElementsByName("phone").

By this you don't have to wory about id of element.

answered Sep 13 '14 at 20:00

Pulkit

137
5

score 0 · Answer 3 · edited May 23 '17 at 12:23

0

I kinda agree with Barmar, but I did a quick search and there is a viable solution on SO already: Can you use a wildcard in getElementById?

They use querySelectorAll and some wild cards to get at what you want (instead of getElementById).

edited May 23 '17 at 12:23

Community

1
1

answered Sep 13 '14 at 20:03

lucusp

175
1
2
9

I saw that as well but I'm not very good with JavaScript and would need some help getting that to work with the existing code that I have. – DSWebber Sep 13 '14 at 21:19

score 0 · Answer 4 · answered Sep 13 '14 at 20:05

Simple do this:

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

getElementById breaks when Id changes

4 Answers4