Javascript 两个按钮都触发一个脚本

我有一个按钮，可以触发网页上的脚本。一个例子是有效的。当我尝试添加第二个按钮/脚本时，两个按钮仅触发第二个脚本。我知道（想想？）这是因为我为按钮定义的变量并不是它们各自的脚本所独有的，但我尝试的每一种方式都会破坏整个过程

button  {
  display: block;
  cursor: pointer;
    margin-left: 10px;}  
button:after {
    content: " (off)";
  }  
button.on:before {
    content: "✓ ";
  }
button.on:after {
    content:" ";
}
.frac span { 
      -webkit-font-feature-settings: "frac" 1;
          font-feature-settings: "frac" 1;
}
.onum span {
      -webkit-font-feature-settings: "onum" 1;
          font-feature-settings: "onum" 1;  
}

Html:

分数
旧式数字

当按下按钮时，此文本应更改OT功能。 JS:

var btn=document.getElementById（“frac”），
body=document.getElementById（“textA”），
activeClass=“frac”；
btn.addEventListener（“点击”，函数（e）{
e、 预防默认值（）；
body.classList.toggle（activeClass）；
btn.classList.toggle（'on'）；
});  
var btn=document.getElementById（“onum”），
body=document.getElementById（“textA”），
activeClass=“onum”；
btn.addEventListener（“点击”，函数（f）{
f、 预防默认值（）；
body.classList.toggle（activeClass）；
btn.classList.toggle（'on'）；
});  

---

脚本/按钮之间的差异是我所做的不同操作的一些更改，但我大部分都回到了开头，因此更简单。

在javascript中，您声明的每个变量在整个页面中都固有可用。因此，将它们放在单独的标签中不会有任何效果

所以本质上，第二个变量btn实际上覆盖了第一个变量。将第二个变量重命名为btn2

或者，作为替代方案，改变路线

btn.classList.toggle('on')

到

---

单击处理程序中的此将始终指向正在单击的当前按钮。

您可以用更少的代码行完成此操作

//创建按钮数组
让butons=Array.from（document.querySelectorAll（“按钮”），
//您定义了_body
_body=document.getElementById（“textA”）
//对于按钮数组中的每个按钮（map是迭代器）
butons.map（（btn）=>{
//将activeClass定义为按钮的name属性
让activeClass=btn.getAttribute（“名称”）；
//每次你点击按钮
btn.addEventListener（“单击”，（e）=>{
/*这是你的密码，我不知道你为什么需要它
e、 预防默认值（）*/
//您可以切换activeClass和on类
_body.classList.toggle（activeClass）；
btn.classList.toggle（“打开”）；
})
})

按钮{
显示：块；
光标：指针；
左边距：10px；
}
按钮：之后{
内容：“（关）”；
}
按钮。开：之前{
内容：“✓ ";
}
按钮。开：之后{
内容：“；
}
/*我用颜色来形象化变化*/
.压裂跨度{
颜色：红色；
}
B.onum span{
颜色：绿色；
}

分数
旧式数字
脚本/按钮之间的差异是我所做的不同事情的一些变化，但我大部分都回到了开始，因此更简单。

将两个脚本都包含在一个标记中。如果需要，重命名变量。谢谢，这很有效。现在两个按钮都可以工作（但它们会相互撤销）.所以，基本上是固定的。有可能同时使用“活动”和“活动”吗“同时？谢谢，更改var名称可以同时按下两个按钮并触发它们的移动。但是，它们会相互撤销。这是同一个问题的一部分吗？@Moonhawk你在所有地方都改成btn2了吗？var btn2、btn2.addEventListener和btn2.classList？@Moonhawk还在第二个脚本中将activeClass重命名为activeClass2。是的，我在所有地方都对其进行了更改，也对activeClass进行了更改。第2个按钮将撤消第1个按钮，第1个按钮无法撤消第2个按钮。但是，至少他们都能工作！如果您仍然面临一个问题，请您对您的代码做一个JSFIDLE并共享URL，我可以尝试在那里调试它。还请为代码添加一个解释。Moonhawk对Javascript来说似乎是个新手。谢谢@mm的留言。你是对的。我在代码中添加了解释作为注释谢谢！这些评论非常有助于了解正在发生的事情，而且在让两个按钮协同工作方面也非常有效，谢谢。

<script>    var btn = document.getElementById("frac"),
    body = document.getElementById("textA"),
    activeClass = "frac";

btn.addEventListener("click", function(e){
  e.preventDefault();
  body.classList.toggle(activeClass);
  btn.classList.toggle('on');
});  </script>

      <!-- onum -->
<script>    var btn = document.getElementById("onum"),
    body = document.getElementById("textA"),
    activeClass = "onum";

btn.addEventListener("click", function(f){
  f.preventDefault();
  body.classList.toggle(activeClass);
  btn.classList.toggle('on');
});  </script>

btn.classList.toggle('on')

this.classList.toggle('on')