CODEWITHSUNDEEP
javascripthtmlasp.net
user6558380
user6558380

Reputation:

Javascript Check all the <span> tags IDs on a page

I need to check the span`s text and based on the text replace it with the span class. It uses asp Repeater and creates a table.

<span class="label label-default" id="status">

<%# Eval("ProjectStatus")%>

and my not working javascript:

var status = document.getElementById('status').innerHTML;

          for (var i = 0; i < status.length; i++) {
              if (status === "Completed") {
                  status[i].innerHTML = "<span class='label label-success'> + status + </span>";
              }
          }

So the compiled code looks like this:

<span class="label label-default" id="status">Completed</span>
<span class="label label-default" id="status">Hopper</span>

So my goal here is to check which text has that span and replace its class depending on that text. If its Completed set class='label label-success' and so on. thanks.

Upvotes: 0

Views: 71

Answers (3)

James
James

Reputation: 22247

It seems that you just want to change the class of the span from label-default to label-success. I do not advise you to remove all the spans and re-add new ones in order to achieve this. You can simply change their class.

// get all spans with class='label-default'
var spans = document.querySelectorAll("span.label-default");
for (var i = 0; i < spans.length; i++) {
  // if span contains the text Completed, replace label-default with label-success in the span's class list
  if (spans[i].innerHTML == "Completed") {
    spans[i].className = spans[i].className.replace(/\blabel-default\b/, "label-success");
  }
}
.label-default {
  background-color: grey;
}
.label-success {
  background-color: green;
}
<span class='label-default'>Completed</span>
<span class='label-default'>Failed</span>
<span class='label-default'>Completed</span>
<span class='label-default'>Completed</span>
<span class='label-default'>Starting</span>
<span class='label-default'>Failed</span>
<span class='label-default'>Completed</span>

Upvotes: 1

henrique romao
henrique romao

Reputation: 560

ID must be unique. Try selecting the elements by class name and iterate over these found elements checking if the innerHTML is equals to Completed.

The code would by something like this:

var status = document.getElementsByClassName("label-default");
for (var i = 0; i < status.length; i++) {
  if (status[i].innerHTML === "Completed") {
        alert('Completed');
      status[i].innerHTML = "<span class='label label-success'> + status + </span>";
  }
}

Here is a working fiddle.

Upvotes: 0

Dr_Derp
Dr_Derp

Reputation: 870

Not familiar with asp.net, but I think you want something more like this:

var statusElem = document.getElementById('status');
var statusText = statusElem.innerHTML;

if (statusText === "Completed") {
    statusElem.className = 'label label-success';
}

This will change the classname for a SINGLE status element. If you're creating a table with multiple spans, you would want to do something like this:

var statusElems = document.getElementsByClassName("label");
for (var i=0;i<statusElems.length;i++) {
    var statusElem = statusElems[i];
    var statusText = statusElem.innerHTML;

    if (statusText === "Completed") {
        statusElem.className = 'label label-success';
    }
}

Upvotes: 0

Related Questions