How to dynamically assign a class (based on the outcome of if - else) to a span tag of a popover tooltip that uses Bootstrap Tagsinput

Question

//My js file has the following

$mytag.popover({
html:true,
trigger: hover,
container: $mytag,
template: '<div class="popover" role="showDetails">' +
          ...//other
           '</div>',
content:'<div class="info">' +
          ...//other
          '<div class="myrow">' +
          '<span>' + 'Result:'  + '</span>' +
           '<span>' + item.result + '</span>' +
          + '</div>' + 
}); 

The value of item.result is calculated elsewhere (js). The final outcome is expected to be a Boolean value. I'd like to append a css class here instead of displaying the outcome. Eg: If item.result is true. I'd like to add class="ok" to the span tag.

'<span class="ok">' + '</span>' +

If item.result returns false. I'd like to add class="notOk" to the span tag.

'<span class="notOk">' + '</span>' +

Can someone please advise what is the best way to achieve this?.

Thanks in advance.

Answer 1

you can achieve this with string interpolation.

`<span class="${calcutationFn() ? 'ok' : 'noOK'}"> ... </span>`

Answer 2

Have you tried adding an id to the span and then using the element.classlist.add('class_name') function? Add an if statement where the item.result is calculated to add the class to the span like:

if (item.result) {
    document.getElementById("result-span").classList.add("ok"); 
}
else {
    document.getElementById("result-span").classList.add("notOk");
}

HTML DOM classList Property