Tips for dynamically assigning a class to a span tag within a popover tooltip that utilizes Bootstrap Tagsinput based on the result of an if-else statement

//The contents of my JavaScript file are as follows:

$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 in another part of the JavaScript code. We expect the final result to be a Boolean value. Instead of displaying the outcome directly, we want to append a CSS class.

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

If item.result is true, we want to add the class "ok" to the span tag.

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

If item.result is false, we want to add the class "notOk" to the span tag.

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

We would appreciate any advice on the best way to achieve this.

Thank you in advance.

Answer №1

Maybe consider assigning an ID to the span and then utilizing the

element.classList.add('class_name')
method. You could insert an if statement where the item.outcome is evaluated in order to apply the class to the span as shown below:

if (item.outcome) {
    document.getElementById("outcome-span").classList.add("success"); 
}
else {
    document.getElementById("outcome-span").classList.add("failure");
}

Check out HTML DOM classList Property for more information.

Answer №2

Utilize string interpolation for this task.

`<span class="${evaluateCondition() ? 'good' : 'notGood'}"> ... </span>`

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sloped Divider on the Upper Edge of the Page

I'm currently in the process of developing a new website, and I'm looking to create a unique design for the main navigation bar on the homepage. Here is the ideal layout that I have in mind: https://i.stack.imgur.com/pc8z4.png While I understan ...

Run the function once the page has completed downloading and bootstrapping

After experimenting with $evalAsync and $viewContentLoaded, I've found that they only trigger after Angular has completed populating the template. My goal is to determine, from within a directive: Is the template fully replaced by Angular? Have all ...

Creating dynamic CSS classes with SCSS/SASS

Recently, I encountered a scenario where I needed to automate the creation of a series of CSS classes by utilizing a mixin. This led me to ponder if there is a dynamic approach to achieve this. Essentially, the classes I have are structured as follows: . ...

Optimizing React+ReactRouter web app loading times by efficiently splitting and loading CSS using WebPack

I am encountering a delay in the initial loading of my web app, even after implementing various improvements like using only critical CSS during server side rendering. Unfortunately, post-SSR, React still generates unnecessary CSS rules that are not utiliz ...

What are the steps to implement jQuery in Internet Explorer 9?

Can anyone explain why this code snippet is not functioning properly in IE9? Check it out here: http://jsfiddle.net/S7ERu/1/ //jquery $("#submitpost").on("click", function () { alert('test'); }); //html <a href="#" id="submitpost"&g ...

How can I incorporate a personalized checkbox into a column within a React material table?

I'm currently working on a React project where I am using a Material Table. I am trying to figure out how to add a checkbox in a table cell, for example, in the Birth year column instead of just having the year displayed. Can anyone provide guidance o ...

SweetAlert html is not recognizing ng-app, but it functions correctly within the html body

When inserting a bootstrap table inside a SweetAlert, I encountered an issue where using ng-app or ng-repeat to populate data inside the table's rows did not call ng-app. However, when populating the table outside of the SweetAlert in the body, ng-app ...

Improving the functionality of the JavaScript key press function

I have a small javascript snippet on my website that allows me to navigate the site using the arrow keys on my keyboard. document.onkeydown = function(evt) { evt = evt || window.event; switch (evt.keyCode) { case 37: ...

Utilize Bootstrap button dropdown to automatically assign a selected value to a list item

I have a form with a select box that transforms into a bootstrap button after the page loads. However, I am unable to set the selected value for the converted bootstrap button drop-down li. <button type="button" class="btn dropdown-toggle btn-default" ...

transferring data from Node.js to React

Currently, on my listPage, I have a setup where there are 2 documents. The intention is to allow users to click an edit button which directs them to the editPage. At present, this functionality works as expected. However, the process involves using an axio ...

While utilizing a dynamic PHP navigation header, the nested divs are shifting below the container div

After successfully implementing a dynamic PHP header on my site, I encountered issues when trying to incorporate the remaining content within the container div along with the header div. The additional content is not displaying inside the container but is ...

Incorporate query strings into every hyperlink within the application

Let me paint you a picture... I've got this lovely Next.js app that's been around for a while, filled with lines of code we've poured our hearts into. Recently, we decided to spice things up by running some ads and now we are itching to see ...

image in the background following the header

Live Example: http://jsbin.com/opokev/54 I am currently trying to set this image as the background image while also including a header, but as you can see in the demo, the header is overlapping the image. Is there a way I can rearrange this so that the h ...

the ng-repeat directive disables input controls within the tfoot

When working with JSON data, I encountered a situation where I needed to display different types of student details in a table. For one specific type of student, namely partners, I wanted to include input controls such as checkboxes and buttons. However, e ...

Navigate to a precise section of the webpage, positioned at a specific distance from the top

When scrolling on my page, the static header moves along with the user. However, when I link to a specific div using the standard method, the div appears behind the header. I would like to utilize: <a href="#css-tutorials">Cascading Style Sheet Tut ...

Find common connections on Facebook using an app PRIOR to downloading it

Is there a way to programmatically find mutual friends between myself and an application or page? For instance, in the scenario shown below: In the image above, it's evident that prior to installing the Causes App (1) I can observe that myself and t ...

What is the best approach for integrating HTML and JavaScript code into Flutter mobile platforms?

For the past 4 months, I've been immersing myself in Flutter without any prior experience in Javascript. My goal is to utilize the Soundcloud HTTP API to create a user-interactive app. However, I've hit a roadblock when it comes to integrating JS ...

Tips for inserting a value into an HTML field using ASP.NET code behind

Recently, I created an application in JavaScript by utilizing HTML fields in ASP.NET. Due to some issues with the IDs, I had to resort to using HTML fields instead of ASP text boxes. Surprisingly, the HTML fields are functioning well with JavaScript. Now ...

Tips for disabling automatic scrolling when a browser is reloaded using JavaScript

In today's world, most browsers automatically adjust the window scroll position upon page refresh. While this is generally a helpful feature, I find myself in a situation where I need to reload a page and direct focus to a different part of the page t ...

Remove a row from a table using the hyperlink reference

I am facing an issue where I want to delete a row in the table along with the corresponding database entry by clicking on a href link, but it doesn't work as expected: <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"& ...