How to change a span label's class using Javascript

Question

I have an html element like this:

<dd><span class="label label-success" id="status">Production</span></dd>

I want to change it to

<dd><span class="label label-warning" id="status">Idle</span>

based on a ws.socket message.

setTimeout(function(){
            window.ws = new WebSocket('ws://localhost:8088/sock/123');
            window.ws.onmessage = function (evt) {
                field.value = "Idle"
            };
            window.ws.onclose = function (evt){

            }
            window.ws.onopen = function (evt){

            }

        }, 500);

I want to change the value from Production to Idle and the class to "label label-warning". I know to change the value I would do this:

var field = document.getElementById("status")

but I'm not exactly sure how to change the class and would using field.value be the correct way to change a span text?

Answer 1

You have jQuery, use it!

$("#status").text("Idle").removeClass("label-success").addClass("label-warning");

Or just .toggleClass("label-success label-warning");

Answer 2

Use Jquery

Try this

$('#status').text('Your Text')  //For setting text
$('#status').removeClass('label-success').addClass('label-warning')

Answer 3

If you are just wanting to use JavaScript and not jQuery, you can refer to this answer. You can easily set the class by just saying:

document.getElementById("whatever").className = "";

Answer 4

To change the class (this is much more convenient using jQuery):

document.getElementsById('status').setAttribute("class","label label-warning");

To change the value of the span text:

document.getElementsById('status').innerHTML = "Production";