Changing class based on variable status

Question

I followed a basic JavaScript tutorial to build an issue tracker, and it works great. I've been customizing it a bit, and want to change the class/color relating to its status, and it has two classes associated with it. I'd like the status indicator to be green if it's open, red if it's not. Its default is always green. Green classes are label label-success, closed classes are label label-danger.

A live example can be seen at http://www.sanjosecoder.com/issuetracker/bug-tracker.html

I've tried using document.getElementById("bg").setAttribute('className', 'lable label-danger'); and placing it just below the loop that cycles through the issue status in the setStatusClosed function.

I've tried using an if statement in the same location

function fetchIssues() {
    var issues = JSON.parse(localStorage.getItem('issues'));
    var issuesList = document.getElementById('issuesList');

    issuesList.innerHTML = '';

    for (var i = 0; i < issues.length; i++) {
        var id = issues[i].id;
        var desc = issues[i].description;
        var severity = issues[i].severity;
        var assignedTo = issues[i].assignedTo;
        var status = issues[i].status;

        issuesList.innerHTML += '<div class="well-sm">'+
                            '<h6 style="color: #979897;">Issue ID: ' + id +          '</h6>'+
                            '<p style="color: #979897;"><i>Status:</i> <span class="label label-success" id="bg">' + status + '</span></p>'+
                            '<p><i style="color: #979897;">Description:</i> ' + desc + '</p>'+
                            '<p><i style="color: #979897;">Severity:</i> <span class="glyphicon glyphicon-fire" style="color:#ff0000;"></span> ' + severity + '</p>'+
                            '<p><i style="color: #979897;">Assigned To:</i> <span></span> ' + assignedTo + '</p>'+

                            '<a href="#" onClick="setStatusClosed(\''+id+'\')" class="btn btn-warning" style="margin-right: 15px;">Close</a>'+
                            '<a href="#" onClick="deleteIssue(\''+id+'\')" class="btn btn-danger">Delete</a>'+
                                '</div>';                               

    }
}

function setStatusClosed(id) {
    var issues = JSON.parse(localStorage.getItem('issues'));

    for (var i = 0; i < issues.length; i++) {
        if (issues[i].id == id) {
            issues[i].status = "Closed";
            if (issues[i].status == "Closed") {
                document.getElementById("bg").setAttribute('className', 'lable label-danger');
            }
        }
    }

    localStorage.setItem('issues', JSON.stringify(issues));

    fetchIssues();
}

Expected results would be that when an issue is closed, the green background changes to red in the status area.

Actual results have been anywhere from not working, to disabling the buttons function. Once I got it to change color, but lost it's padding, and disabled the close function.

Check out the ```classList``` property of the DOM elements. It has neat methods for adding and removing classes: ```element.classList itself is read-only, although you can modify it using the add() and remove() methods.``` https://developer.mozilla.org/en-US/docs/Web/API/Element/classList — Kyrre, Aug 06 '19 at 20:16

Tuneer · Accepted Answer · 2019-08-06T22:39:39.597

1

if(issues[i].status == "Closed") {
    document.getElementById("bg").setAttribute('className', 'lable label-danger');
}

Don't use setAttribute. Use classList.add("") and classList.remove("").

Change it to

if (issues[i].status == "Closed") {
    var bg = document.getElementById("bg");
    bg.classList.remove("label-success"); // removes success class
    bg.classList.add("label-danger"); // adds danger class
}

EDIT: This is a more specific solution toward the problem.

1) Get rid of the whole if(issues[i].status == "Closed"){} statement.

2) Navigate to the fetchIssues() function.

3) Add this specific line of code underneath your status variable:

var statusColorClass = status == "Open" ? "success" : "danger";

If you don't understand that logic, please look here.

4) Finally, go to your innerHTML code in that function and modify it so that the span which shows your status looks like this:

<span class="label label-' + statusColorClass + ' id="bg">.

Summary)

Since the class of the status span depends on the status and you have the status value there, simply add a conditional to choose the correct class.

edited Aug 06 '19 at 22:39

answered Aug 06 '19 at 20:16

Tuneer

584
2
16

Hi Tuneer - Thank you for your quick response. I tried your suggestion, but it's not working for me. I had to change the keyword "let" to "var" to get my text editor to stop warning me about the syntax error, but i'm still writing old-style JavaScript, and not using the new ECMA syntax. I wonder if mixing the two is causing the disconnect?

I tried adding the code directly under if (issues[i].id == id) { issues[i].status = "Closed"; – ScriptNewbie Aug 06 '19 at 20:44
Hmmm...Well, I think I have them in order? I double checked in the code, and I have four open brackets, and four close brackets - it's the "setStatusClosed" function. Is it possible I have the code mis-ordered? view-source:http://www.sanjosecoder.com/issuetracker/main.js – ScriptNewbie Aug 06 '19 at 21:05
@ScriptNewbie Check out my update. Follow the steps precisely. The solution worked for me. If it still doesn't work for you, let me know. – Tuneer Aug 06 '19 at 22:40
That did solve it. I'm currently reading your the info in the link you provided, trying to understand the logic. I've so much to learn about JavaScript. Thank you so much for your help Tuneer, it is greatly appreciated. – ScriptNewbie Aug 07 '19 at 17:58
No problem. If you still need help understanding, just let me know. Just mark the answer as correct, so the question can be "answered". – Tuneer Aug 07 '19 at 18:05
Oh, okay. This was my first question. I've been looking for how to do that, but can't find specific direction. I clicked the grey checkmark to green to the top-left of your response. Is that how to mark and answer as correct? – ScriptNewbie Aug 07 '19 at 22:46
Yeah, it is. Thanks! – Tuneer Aug 08 '19 at 00:05

Changing class based on variable status

1 Answers1