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

Question

我需要创建一个跨度，它显示活动的状态和特定颜色。 例如，跨度的默认颜色为红色，文本为“接受”。 通过单击它，它需要将其颜色更改为绿色，并将文本更改为 Accepted。 如果状态为“已接受”，则需要将其文本更改为“已完成”。 如果状态为“完成”，则需要将其背景颜色更改为黄色，将文本更改为“关闭”。

我试过这个：

 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>

但它不起作用。 它不执行 if 和 else if 部分。 它直接跳转到else部分。 我怎么做？

Answer 1

span不能等于"Accept" 。 它是一个 DOM 元素，而不是字符串。 您想比较span.textContent 。 this也是指function txtclrchan() ，它没有样式属性（只需使用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

您必须检查跨度的textContent 。 并且回调中的this关键字不引用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 是一个元素，因此您需要使用span.innerText获取 innerText 并将其替换为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

有几个问题。

• 对跨度中的文本的测试是在元素本身上完成的，而不是在其文本上。
• 颜色的更新需要在 span 元素上完成。

 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";
    }
}