CODEWITHSUNDEEP
javascriptjqueryhtmlfunction
Duders
Duders

Reputation: 83

Change id for all elements having a class

I am pretty new to JavaScript/web development in general. I am trying to create a JS function that takes an input string. That string will be the name of a class. I am trying to get all the elements of that class (they are all id's), and then add "OFF" to the end of all of the id's. I have been looking through existing threads, and found this one:

Give all elements in Class an seperate Id Javascript

However, I am still unable to get my function to work:

function idOFF (inputClass) {
    var x = document.getElementsByClassName("'" + inputClass + "'");
    for (i = 0; i < x.length; i++) {
        x.setAttribute('id', x[i] + "OFF");
    }
}

I have accomplished this on an individual level using jQuery, and tried incorporating that code into my function. It wouldn't work that way either:

function idOFF (inputClass) {
    var x = document.getElementsByClassName("'" + inputClass + "'");
    for (i = 0; i < x.length; i++) {        
        $("'#" + x[i] "'").attr("id", x[i] + "OFF");
    }
}

Upvotes: 4

Views: 1580

Answers (4)

bini
bini

Reputation: 154

You could use it like this.

function idOff(className) {
    [].forEach.call(document.getElementsByClassName(className), function (el, i, a) {
        var attr = el.getAttribute('id');
        el.setAttribute('id', attr + 'OFF');
    })
}

Upvotes: 0

epascarello
epascarello

Reputation: 207501

You should not build a string with quotes

document.getElementsByClassName("'" + inputClass + "'");

should be

document.getElementsByClassName(inputClass);

Next you are not accessing the single element in the loop

 x.setAttribute('id', x[i] + "OFF");

should be

 x[i].setAttribute('id', x[i].id + "OFF");
  ^^^

so your script now should be

function idOFF (inputClass) {
    var x = document.getElementsByClassName(inputClass);  //removed quotes
    for (var i = 0; i < x.length; i++) {  //added the missing var
        x[i].setAttribute('id', x[i].id + "OFF");  //added the [i] and .id
    }
}

Upvotes: 1

Jesse
Jesse

Reputation: 2830

One thing I noticed is this line

var x = document.getElementsByClassName("'" + inputClass + "'");

This does not really need to be in quotes like this. Here is some code below that should help you out.

function idOFF (inputClass) {
    var x = document.getElementsByClassName(inputClass);
    for (i = 0; i < x.length; i++) {
        x[i].setAttribute('id', x[i].getAttribute('id') + 'OFF');
    }
}
<input type='text' id='myinput' value='funny'> <br>
<input type='button' onclick='idOFF(document.getElementById("myinput").value)' value='Go'>
<hr>
<div id='foo' class='funny'>1</div>
<div id='foo2' class='funny'>2</div>
<div id='foo3' class='funny'>3</div>
<div id='foo4' class='funny'>4</div>
<div id='foo5' class='funny'>5</div>

As epascarello pointed as well of which I did not but the code reflects it, in your for loop you you were not placing the incremental value i after x in x.setAttribute so the element to be selected during the course of that loop was not being selected.

This would be changed to x[i]respectively.

Upvotes: 0

Ionică Bizău
Ionică Bizău

Reputation: 113335

If you're using , you can do the following:

function idOFF (inputClass) {
    var $elms = $("." + inputClass);
    $elms.forEach(function () {
        var $this = $(this);
        $this.attr("id", $this.attr("id") + "OFF");
        // or just this:
        // this.id += "OFF"
    });
}

You also can do that in pure , fixing some issues you have in your current code:

function idOFF (inputClass) {
    var x = document.getElementsByClassName(inputClass);
    for (i = 0; i < x.length; i++) {        
        x[i].id += "OFF";
    }
}

Note the getElementsByClassName where I removed the additional quotes and I also removed the jQuery wrapping replacing it with id.

  function idOFF(inputClass) {
    var x = document.getElementsByClassName(inputClass);
    for (i = 0; i < x.length; i++) {
      x[i].id += "OFF";
    }
  }

  idOFF("foo");
#testOFF {
  color: red;
}
<div class="foo" id="test">1</div>
<div class="foo" id="test1">2</div>
<div class="foo" id="test2">3</div>
<div class="foo" id="test3">4</div>

Upvotes: 3

Related Questions