Javascript 更改按钮的文本而不更改CSS样式

我正在修补HTML和Javascript，遇到了一个问题

我有一个按钮，它可以在悬停时设置动画，并在单击时更改文本和颜色。 再次单击时，它会返回到与以前相同的颜色和文本。我正在处理一个JS文件

我的问题是，在第一次单击并悬停时，一切正常，但在第一次单击后，动画将永远消失，按钮现在只更改颜色和文本，没有悬停动画

按钮的HTML格式：

    <button class="button" style="vertical-align:middle" id="buttonclick" onclick="setColor()">
<span>Enable Control</span></button>

启用控制

---

完整的解释见此。

您的解释有点模糊，标题有点混乱。我想你想要和你在乞讨时一样的悬停（当你按下按钮并返回蓝色时，悬停必须再次出现）。我会解决它：

问题是您正在避免代码行上的span标记：

property.innerHTML = "Enable control"

您应该将其更改为：

property.innerHTML = "<span>Enable control</span>"

property.innerHTML=“启用控制”

其他部分也是如此：

 property.innerHTML = "<span>Disable control</span>"

property.innerHTML=“禁用控制”

将Javascript代码替换为以下修复代码：

var count = 1;

function setColor() {
  var property = document.getElementById('buttonclick');
  if (count == 0) {
    property.style.backgroundColor = "#4f8ff7"
    property.innerHTML = "<span>Enable control</span>"
    alert("Disabled");
    count = 1;
  } else {
    property.style.backgroundColor = "#a84237"
    property.innerHTML = "<span>Disable control</span>"
    alert("Enabled");
    count = 0;
  }
}

var计数=1；
函数setColor（）{
var属性=document.getElementById（'buttonclick'）；
如果（计数=0）{
property.style.backgroundColor=“#4f8ff7”
property.innerHTML=“启用控件”
警报（“禁用”）；
计数=1；
}否则{
property.style.backgroundColor=“#a84237”
property.innerHTML=“禁用控制”
警报（“已启用”）；
计数=0；
}
}

你的解释有点含糊不清，标题也有点混乱。我想你想要和你在乞讨时一样的悬停（当你按下按钮并返回蓝色时，悬停必须再次出现）。我会解决它：

问题是您正在避免代码行上的span标记：

property.innerHTML = "Enable control"

您应该将其更改为：

property.innerHTML = "<span>Enable control</span>"

property.innerHTML=“启用控制”

其他部分也是如此：

 property.innerHTML = "<span>Disable control</span>"

property.innerHTML=“禁用控制”

将Javascript代码替换为以下修复代码：

var count = 1;

function setColor() {
  var property = document.getElementById('buttonclick');
  if (count == 0) {
    property.style.backgroundColor = "#4f8ff7"
    property.innerHTML = "<span>Enable control</span>"
    alert("Disabled");
    count = 1;
  } else {
    property.style.backgroundColor = "#a84237"
    property.innerHTML = "<span>Disable control</span>"
    alert("Enabled");
    count = 0;
  }
}

var计数=1；
函数setColor（）{
var属性=document.getElementById（'buttonclick'）；
如果（计数=0）{
property.style.backgroundColor=“#4f8ff7”
property.innerHTML=“启用控件”
警报（“禁用”）；
计数=1；
}否则{
property.style.backgroundColor=“#a84237”
property.innerHTML=“禁用控制”
警报（“已启用”）；
计数=0；
}
}

您正在更改按钮的

innerHtml

。将span元素替换为文本

---

检查您的更新。

您正在更改按钮的

innerHtml

。将span元素替换为文本

---

检查您的更新。

因为当您设置

innerHTML

时，您正在删除转换应用的范围。您以

开始，但以

结束。您需要在按钮内设置span的innerHTML，而不是按钮本身。因为设置

innerHTML

时，您正在删除转换应用的span。您可以从

开始，但最终以

结束。您需要将span的innerHTML设置在按钮内部，而不是按钮本身。谢谢！！我犯了粗心的错误：（也在代码中）property.innerHTML=“Disable control”应该是property.innerHTML=“Disable control”@Ravikishan没问题，兄弟！你是对的。我已经更新了我的答案，如果这是你正在寻找的解决方案，请单击正确的答案，这样对其他用户也会有帮助。谢谢！！我犯了一个粗心的错误：（也在你的代码中）property.innerHTML=“Disable control”应该是property.innerHTML=“禁用控制”@Ravikishan没问题，兄弟！你是对的。我已经更新了我的答案，如果这是你正在寻找的解决方案，请单击正确或正确的答案，这样对其他用户也会有帮助。