javascript changing tag attributes not being executed in the right order?

Question

I have an html file that consists of a table with fields inside. Some fields are marked by xxx, which should be converted to textareas. That has been successfully done as:

function raplace() {

    var replaced = $("body").html().replace(/xxx/g,'<textarea class="textarea" id=0 style="width: 100%; height: 100%; min-height:3em; box-sizing: border-box; resize: none; border:none"></textarea>');

    $('body').html(replaced);
}

The task is now to assign a name attribute that should be for the first textarea name="text1", for the second area name="text2" and so on. To accomplish this I purposely set id=0 for all text areas, as you can see form the code above. I have tried to accomplish the goal by using this code:

var i=1;
    while (document.getElementById('0')) {

        //$('#0')[0].name = 'text'+i;
        //$('#0')[0].id = i;

        document.getElementById("0").name = "text" + i;
        document.getElementById("0").id = i;

        //document.getElementById("0").setAttribute("name","text"+i);
        //document.getElementById("0").setAttribute("id",i);
        i++;

As you may know, all three codes above are working and do the same thing. However, here comes the big problem.

When i put the code into the browser console, it does as expected, changing name and id attributes perfectly. However, if the code is put into my file, it only generates the textareas, setting all id=0. The second part of the script (to change the attribute values) is not executed. I have been looking all over the web for many days now, and have resorted to ask here at stack overflow. It If anyone can help me out, it would be amazing. Thanks!!!

NOTE: the first part needs to be executed first, or otherwise you would not have an id to target.

EDIT: After cleaning up the code a bit, here is what I have. If anyone knows why the second part does not execute, please let me know. Thanks!

function raplace() {

    var replaced = $("body").html().replace(/xxx/g,'<textarea class="replacement" style="width: 100%; height: 100%; min-height:3em; box-sizing: border-box; resize: none; border:none"></textarea>');

    var replacements = document.getElementsByClassName('replacement');
    var txtArea;

    for (var i = 0; i < replacements.length; i++) {
        txtArea = replacements[i];
        txtArea.id = "text" + i;
        txtArea.name = "text" + i;
    }

$('body').html(replaced);
}

If you can come up with a better solution of how to convert places with xxx to on an html file, I would gladly use that suggestion, even if it's totally different from the above. — , Jun 10 '13 at 17:22

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

There are a couple of bad practices at play here that may be mucking with your solution:

Your ID's do not begin with a letter. See: What are valid values for the id attribute in HTML?
You have multiple elements with the same ID.

One suggestion is to use a class to target your elements, e.g.

'<textarea class="textarea replacement"' // etc

then..

var replacements = document.getElementsByClassName('replacement'),
    txtArea;

for (var i = 0; i < replacements.length; i++) {
    txtArea = replacements[i];
    txtArea.id = "text" + i;
    txtArea.name = "text" + i;
}

edited May 23 '17 at 11:49

Community

1
1

answered Jun 10 '13 at 17:29

calebds

25,670
9
46
74

Treating DOM as a gigantic string is the most prominent bad practice here :P – Esailija Jun 10 '13 at 17:31
Thanks, the points you're making are good, and they cleaned up my code. However, the problem prevails. When I enter the code into the console, the code works fine. However, there seems to be something wrong with how the code is being executed. And yes, it's bad practice to store this monster into a string. – Jun 10 '13 at 21:32

javascript changing tag attributes not being executed in the right order?

1 Answers1