如何通过单击连续更改跨度的颜色和文本？

Question

I need to create a span, which shows the status of an activity and specific color. As an example default color of the span is red and the text is "Accept". by clicking on it it needs to change its color to green and text to Accepted. If Status is "Accepted" it needs to change its text to "completed". If the status is "completed", it needs to change its background color to yellow and text to "closed".

I've tried this:

 var span = document.getElementById("stat"); function txtclrchan() { if (span === "Accept") { span.textContent = "Accepted"; this.style.backgroundColor = "#047611"; } else if (span === "Accepted") { span.textContent = "Completed"; this.style.backgroundColor = "#047611"; } else { span.textContent = "Closed"; this.style.backgroundColor = "#F1C40F"; } }

 <span class="badge bg-danger" id="stat" onclick="txtclrchan()">Accept</span>

But it's not working. It doesn't execute if and else if parts. It directly jumps to the else part. How do I do that?

Answer 1

span can't be equal to "Accept" . It's a DOM element, not a string. You want to compare span.textContent . Also this refers to function txtclrchan() , it has no style property (just use span.style ).

 var span = document.getElementById("stat"); function txtclrchan() { const text = span.textContent; if (text === "Accept") { span.textContent = "Accepted"; span.style.backgroundColor = "#047611"; } else if (text === "Accepted") { span.textContent = "Completed"; span.style.backgroundColor = "#047611"; } else { span.textContent = "Closed"; span.style.backgroundColor = "#F1C40F"; } }

 <span class="badge bg-danger" id="stat" onclick="txtclrchan()">Accept</span>

Answer 2

you have to check the textContent of the span. and the this keyword in the callback does not refer to span .

 var span = document.getElementById("stat"); function txtclrchan() { if (span.textContent === "Accept") { span.textContent = "Accepted"; span.style.backgroundColor = "#047611"; } else if (span.textContent === "Accepted") { span.textContent = "Completed"; span.style.backgroundColor = "#047611"; } else { span.textContent = "Closed"; span.style.backgroundColor = "#F1C40F"; } }

 <span class="badge bg-danger" id="stat" onclick="txtclrchan()">Accept</span>

Answer 3

Span is an element so you need take innerText using span.innerText and also replace this with span .

 var span = document.getElementById("stat"); function txtclrchan() { if (span.innerText === "Accept") { span.textContent = "Accepted"; span.style.backgroundColor = "#047611"; } else if (span.innerText === "Accepted") { span.textContent = "Completed"; span.style.backgroundColor = "#047611"; } else { span.textContent = "Closed"; span.style.backgroundColor = "#F1C40F"; } }

 <span class="badge bg-danger" id="stat" onclick="txtclrchan()">Accept</span>

Answer 4

There are a couple of problems.

• The test for what text is in the span is being done on the element itself, not on its text.
• the updating of color needs to be done on the span element.

 var span = document.getElementById("stat"); function txtclrchan(){ var text = span.textContent; if(text==="Accept") { span.textContent = "Accepted"; span.style.backgroundColor="#047611"; } else if(text==="Accepted"){ span.textContent = "Completed"; span.style.backgroundColor="#047611"; } else{ span.textContent = "Closed"; span.style.backgroundColor="#F1C40F"; } }

 <span class="badge bg-danger" id="stat" onclick="txtclrchan();">Accept</span>

Answer 5

var span = document.getElementById("stat");

function txtclrchan() {
    if (span.textContent === "Accept") {
        span.textContent = "Accepted";
        console.log(this)
        span.style.backgroundColor = "#047611";

    } else if (span === "Accepted") {
        span.textContent = "Completed";
        this.style.backgroundColor = "#047611";
    } else {
        span.textContent = "Closed";
        span.style.backgroundColor = "#F1C40F";
    }
}