replace class value with javascript

Question

I would like to replace abcName with xyzName?

<tr>
    <td>
        <b class="abcName">Bob</b>
    </td>
</tr>

Using this, but on page load nothing changes:

var bobo = document.getElementsByTagName("td");


function user(a, b, c) {
    try {
        if (bobo[c].innerHTML.match('>' + a)) {
            bobo[c].className = b;
        }
    } catch (e) {}
}


function customs() {
    for (i = 0; i < bobo.length; i++) {

        classChange("Bob", "xyzName", i);

    }
}
setInterval("customs()", 1000);

Mr Meow · Answer 1 · 2011-06-11T21:22:12.013

1

Grab the element you want to change (can do this multiple ways, in this example i used ID).

var x = document.getElementById( 'id-of-my-element' );
x.className = 'b';

To remove a class use:

x.className = x.className.replace(/\bCLASSNAME\b/,'');

Hope this helps.

edited Jun 11 '11 at 21:22

answered Jun 11 '11 at 09:31

Mr Meow

362
2
11

it doesnt have an ID. Only that class for the bold tag. – sarsar Jun 11 '11 at 09:37

score 1 · Accepted Answer · edited May 23 '17 at 10:34

Although I'm not real sure if what you're doing with the interval and whatnot is the best approach, you can:

var tidi = document.getElementsByTagName("td");

function changeStyleUser(a, b, c) {
    try {
        if (tidi[c].children[0].innerHTML.indexOf(a) === 0) {
            tidi[c].className = b;
        }
    } catch (e) {}
}


function customizefields() {
    for (i = 0; i < tidi.length; i++) {

        changeStyleUser("Bob", "xyzName", i);

    }
}
setInterval("customizefields()", 1000);

http://jsfiddle.net/zBmjb/

Note, you also had the wrong function name in your for loop as well.

If you use jQuery, this would be MUCH simpler.

EDIT

Using jQuery:

function customizefields(a) {
    $('td b').each(function(){
        if ($(this).text().indexOf(a) === 0) {
            this.className = 'xyzName';
        }
    });
}
setInterval(function(){customizefields('Bob')}, 1000);

http://jsfiddle.net/zBmjb/1/

Also, note the use of the anonymous function instead of using a string in setInterval(). This allows you to not use eval(), which is considered expensive and potentially harmful.

EDIT 2

If you wanted to pass in a list of name and class associations, you could use an array with objects, like so:

function customizefields(arrNames) {
    $('td b').each(function(){
        for (var i = 0; i < arrNames.length; i++) {
            if ($(this).text().indexOf(arrNames[i].name) === 0) {
                this.className = arrNames[i].class;
            }
        }
    });
}
var namesToChange = [
    {'name':'Bob','class':'Bob'},
    {'name':'Bert','class':'Bert'},
    {'name':'Jeff','class':'Jeff'}
];
setInterval(function(){customizefields(namesToChange)}, 1000);

http://jsfiddle.net/zBmjb/4/

It feels messy though, since it searches for all selected nodes, then for each found, loops over the current node for each name looking for a matched value, all while doing this once a second. The cleaner approach would be to see if the name value from the current node was found:

function customizefields(objNames) {
    $('td b').each(function(){
        name = $(this).text();
        if (name.indexOf(" ") != -1) {
            name = name.substring(0, name.indexOf(" "));
        }
        if (objNames[name]) {
            this.className = objNames[name];
        }
    });
}
var namesToChange = {
    'Bob':'Bob',
    'Bert':'Bert',
    'Jeff':'Jeff'
};
setInterval(function(){customizefields(namesToChange)}, 1000);

http://jsfiddle.net/zBmjb/5/

EDIT 3

If you need multiple values, you can make the value for the object an object as well.

function customizefields(objNames) {
    $('td b').each(function(){
        name = $(this).text();
        if (name.indexOf(" ") != -1) {
            name = name.substring(0, name.indexOf(" "));
        }
        if (objNames[name]) {
            this.className = objNames[name].class;
            this.style.backgroundImage = "url(" + objNames[name].img + ")";
        }
    });
}
var namesToChange = {
    'Bob':{'class':'Bob','img':'bobspic.jpg'},
    'Bob':{'class':'Bert','img':'Bertphoto.jpg'},
    'Bob':{'class':'Jeff','img':'jeff.jpg'}
};
setInterval(function(){customizefields(namesToChange)}, 1000);

@Jared Farrish I wouldn't mind a jquery solution if its a better way to go :) — sarsar, Jun 11 '11 at 09:42
@Jared Farrish you're a pro!!!! if i wanted to add more names say bob, bert, and jeff and give each name its own class value how would you do that? — sarsar, Jun 11 '11 at 09:59
@Jared Farrish Your talent amazes me :D If I could bother you with one last request? Could you add this code http://www.fixee.org/paste/un7306j/ into the last example. Its based on the earlier JavaScript I posted. From what I can understand it adds the bgImage class to the td tag based on the name. So if its possible to alter the array to have name:name(class):bgimage(class) — sarsar, Jun 11 '11 at 11:35
+1 for a solid multiple-answer answer. (and a great avatar photo). — Mr Meow, Jun 11 '11 at 21:23
@CleverQuack - Thanks. @sarsar - I just noticed that I had `.class` instead of `.img` in the last code edit. FYI. — Jared Farrish, Jun 11 '11 at 21:24
@Jared Farrish instead of apply the background image to the tag can you make it so that its applied to the `` for example `
Bob Mackey` it would go to the `` right before the `` — sarsar, Jun 11 '11 at 22:11
@sarsar - I'm going to let you figure that out. If I keep doing it for you, you'll never learn how to do it yourself. Hint: it involves Javascript's DOM property `parentNode`. ;) — Jared Farrish, Jun 11 '11 at 22:13

sudipto · Answer 3 · 2011-06-11T09:41:21.493

0

if (tidi[c].innerHTML.search("class=\"abcName\"")>=0) {
     tidi[c].children[0].className = b;
}

edited Jun 11 '11 at 09:41

answered Jun 11 '11 at 09:27

sudipto

2,472
1
17
21

score 0 · Answer 4 · answered Jun 11 '11 at 09:37

0

Change this line:

classChange("Bob", "xyzName", i);

to this:

changeStyleUser("Bob", "xyzName", i);

Your script will work fine then. Do yourself a favor and use a debugger. :-)

answered Jun 11 '11 at 09:37

squidbe

1,012
1
8
13

replace class value with javascript

4 Answers4