I want to change the class from changing text

Question

I am having trouble making the class change depending on text that changes automatically.

<div class="WAIT">
    <p id="device_display">WAIT</p>
</div>

The text changes to WAIT, ON, OFF.

NOTE: The text changes automatically using MQTT.

Any help would be appreciated.

How did you change your text? – Chaska Apr 30 '19 at 02:08 — Chaska, Apr 30 '19 at 02:08
@Chaska It changes using MQTT. – Soul Gamer Apr 30 '19 at 02:12 — Soul Gamer, Apr 30 '19 at 02:12

Ryland Goldman · Answer 1 · 2019-04-30T02:21:19.990

1

You could create a class called changeText and use that to update the values.

jQuery:

$(".changeText").attr('class', $(".changeText").innerHTML+' changeText');

HTML:

<div class="WAIT changeText">
    <p id="device_display">WAIT</p>
</div>

edited Apr 30 '19 at 02:21

answered Apr 30 '19 at 02:06

Ryland Goldman

95
1
14

I need something like "If (text = WAIT) then (Class = WAIT)". – Soul Gamer Apr 30 '19 at 02:11

score 1 · Accepted Answer · answered Apr 30 '19 at 02:24

Add a class .parent and try these scripts:

$('#device_display').bind("DOMSubtreeModified", function() {
  $(this).closest('.parent')
    .removeClass('WAIT ON OFF')
    .addClass($(this).text());
});

$('input').on('change', function() {
  $('#device_display').text($(this).val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent WAIT">
    <p id="device_display">WAIT</p>
</div>

<hr>
<input type="text">

Is this what you are looking for?

score 1 · Answer 3 · answered Apr 30 '19 at 02:29

<div class="WAIT" id="changeid">
   <p id="device_display">WAIT</p>
</div>

var htmltxt = $("#device_display").html();
$("#changeid").attr('class', htmltxt);

Not sure if this is what you looking for, this is the possible answer I can give based on my knowledge.

Links to refer:

J-Query change class name

J-Query .html documentation

I want to change the class from changing text

3 Answers3