As someone who is new to javascript, html, and jquery, I have been trying to change the text of 2 span elements in the same div using jquery's .text() command. Despite going through various solutions provided by different questions, none seem to work for my specific case.
Here is the HTML code:
<div>
<p>
<span class="label label-primary" id="mstatusDim">loading..</span>
<span class="label label-warning" id="warmup">loading</span>
</p>
</div>
And here is the javascript:
$("#mstatusDim").text(result.stat);
$("warmup").text("test");
The issue arises specifically with changing the text of the "warmup" id span.
I have also attempted to make the classes unique, like so:
<div>
<p>
<span class="mstat label label-primary" id="mstatusDim">loading..</span>
<span class="warmuptest label label-warning" id="warmup">loading</span>
</p>
</div>
However, even after making these changes, the "warmup" span still does not update its text. The "mstatusDim" span updates correctly, leaving me baffled as to why one works while the other doesn't.
In an ideal scenario, I would want the second span to be invisible unless given text using .text("XYZ").
<span class="mstat label label-primary" id="mstatusDim">loading..</span>
<span class="warmuptest label label-warning" id="warmup"></span>
If anyone has any suggestions or ideas on how to achieve this, please share them! Your input would be greatly appreciated!