当两个函数参与 eventListener 时，我无法使用函数更改样式属性

Question

总的来说，我在编程方面没有太多经验。查了很多题都没有找到类似的，可能是我做错题了

希望有人能帮忙

我正在用 vanilla javascript 做一个 interfaz 来为网络添加可访问性功能。

我添加了以下 eventListener，其中一个函数更改样式以显示按钮被选中，第二个函数具有以下功能：

    document .getElementById(element.linkedTo) .addEventListener"click",  () => { InterfazController.changeButton("middleBar-button", "middleBarBTN"); AceController.toggleDrawMiddleBar(); }); });

基本上，第一个函数改变颜色和状态。当它与其他按钮一起使用时或者如果我不包含第二个功能（changeButton）

第二个功能可以使用或不使用第一个。 有一个我不明白的干扰...

` export const closed = "width: 0px; right: 0px; border: 0px;"; export const opened = "width: 220px; right: 10px; border: 4px solid #258e9c;";

export function changeButton(buttonId, feature, container) {
  let btnColor = document.getElementById(buttonId).style.backgroundColor;
  if (btnColor === "white" || !btnColor) {
    document.getElementById(buttonId).setAttribute("style", styles.openedBTN);
    document.cookie = `${feature}=` + encodeURIComponent("on")

  } else {
     document.cookie = `${feature}=` + encodeURIComponent("off")
     document.getElementById(buttonId).setAttribute("style", styles.closedBTN);
  }
}    `

这是代码的其余部分：

`
从“../config/getConfig”导入{getConfig}； 从“../config/setConfig”导入{setConfig}；

 // Store a reference to the bar element 
 let bar;

 function handleMouseMove(e) {
   // Update the position of the bar to follow the mouse
   const y = e.clientY;
   bar.style.top = `${y}px`;
 }

 function drawMiddleBar(color, height) {
   // Create the bar element
   bar = document.createElement("div");
   bar.setAttribute("id", "middlebar");
   bar.style.position = "fixed";
   bar.style.left = "0";
   bar.style.right = "0";
   bar.style.top = "50%";
   bar.style.height = height + "px";
   bar.style.backgroundColor = color;
   bar.style.zIndex = "9900";
   bar.style.pointerEvents = "none"; // this line to make the bar unclickable

   document.getElementById("mycontainer").appendChild(bar);

   // Add an event listener to track the movement of the mouse
   document.addEventListener("mousemove", handleMouseMove);
 }

 function removeDrawMiddleBar() {
   // Remove the bar element from the document body
   document
     .getElementById("BMVaccessibilityPlugin")
     .removeChild(document.getElementById("middlebar"));

   // Remove the event listener that tracks the movement of the mouse
   document.removeEventListener("mousemove", handleMouseMove);
 }

 export function toggleDrawMiddleBar() {
   // Gets current state
   var drawOn = getConfig("middleBar");

   if (drawOn === "off") {
     // If drawMiddleBar is off, turn it on by calling drawMiddleBar with color and height      
      //arguments
     var color = getConfig("middleBarColor");
     var height = getConfig("middleBarHeight");
     drawMiddleBar(color, height);
     setConfig("middleBar", "on");

     // If drawMiddleBar is on, turn it off by calling removeDrawMiddleBar
   } else {
     if (document.getElementById("middlebar")) {
       removeDrawMiddleBar();
     }
     setConfig("middleBar", "off");
   }
 }
 `

我试着 console.log 这些值，它们是正确的。 id 名称是正确的。 我试图从 chrome 控制台更改样式并且它有效。 我像在 chrome 控制台中那样替换了变量并使用了 id 名称，但它不起作用。我的意思是：

这适用于 chrome 控制台：

      document.getElementById("middleBar-button") .setAttribute("style", "width: 220px; right: 10px; border: 4px solid #258e9c;");

` 然后，这不

` export const closed = "width: 0px; right: 0px; border: 0px;"; export const opened = "width: 220px; right: 10px; border: 4px solid #258e9c;";

 export function changeButton(buttonId, feature, container) {
   let btnColor = document.getElementById(buttonId).style.backgroundColor;
   if (btnColor === "white" || !btnColor) {
     document.getElementById("middleBar-button").setAttribute("style", "width: 220px; right: 10px; border: 4px solid #258e9c;");
    document.cookie = `${feature}=` + encodeURIComponent("on")

   } else {
      document.cookie = `${feature}=` + encodeURIComponent("off")
      document.getElementById("middleBar-button").setAttribute("style", "width: 220px; right: 10px; border: 4px solid #258e9c;");
   }
 }`

我尝试引用其他按钮并且有效。

我不知道发生了什么。

提前非常感谢