我如何改变颜色和文本的跨度连续点击它?

Question

我需要创建一个span，它显示活动的状态和特定的颜色。例如，span的默认颜色是红色，文本是"Accept"通过点击它，它需要改变它的颜色为绿色和文本接受。如果Status为"accept";它需要将其文本更改为"已完成"。如果状态为"已完成"，则需要将其背景色改为黄色，文本改为"已关闭"。

我试过了:

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是一个元素，所以你需要使用Span .innerText并将替换为跨度与.

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 2

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 3

您必须检查span的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 4

有几个问题。

• 对span中文本内容的测试是在元素本身上进行的，而不是在其文本上进行的。
• 颜色更新需要在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";
}
}