按钮阵列似乎无法正常工作

Question

我有一个练习，我必须为我的课做，并不知道为什么我的按钮阵列不起作用。单击按钮的次数不等于单击的确切次数（如果有意义的话）。

function changeDisplay(buttonClicked) {
    if (currentButton == buttonClicked) {
      return;
    }
    if (buttonClicked == "linear") {
      buttonArray[0] = buttonArray[0] + 1;
      document.getElementById('linear').innerHTML = " Linear = " + buttonArray[0];
      document.getElementById('section1').style.float = 'none';
      document.getElementById('section1').style.width = "100%";
      document.getElementById('sidebar').style.float = 'none';
      document.getElementById('section2').style.float = 'none';

      currentButton = buttonClicked;
      console.log("linear " + buttonArray[0]);
    } else if (buttonClicked == "right") {
      buttonArray[0] += 1;
      document.getElementById('right').innerHTML = " Right Sidebar = " + buttonArray[0];
      document.getElementById('section1').style.float = 'none';
      document.getElementById('section1').style.width = "100%";
      document.getElementById('sidebar').style.float = 'right';
      document.getElementById('sidebar').style.width = "25%";
      document.getElementById('section2').style.float = 'none';
      currentButton = buttonClicked;
      console.log("right " + buttonArray[1]);
    } else if (buttonClicked == "center") {
      buttonArray[0] += 1;
      document.getElementById('center').innerHTML = " Center Sidebar = " + buttonArray[0];
      document.getElementById('section1').style.float = 'left';
      document.getElementById('section1').style.width = "30%";
      document.getElementById('section1').style.marginRight = "25px";
      document.getElementById('sidebar').style.float = 'left';
      document.getElementById('sidebar').style.width = "25%";
      document.getElementById('section2').style.float = 'none';
      document.getElementById('section2').style.width = "100%";
      currentButton = buttonClicked;
      console.log("center " + buttonArray[2]);
    } else if (buttonClicked == "left") {
      buttonArray[0] += 1;
      document.getElementById('left').innerHTML = " Left Sidebar = " + buttonArray[0];
      document.getElementById('section1').style.float = 'none';
      document.getElementById('section1').style.width = "100%";
      document.getElementById('sidebar').style.float = 'left';
      document.getElementById('sidebar').style.width = "25%";
      document.getElementById('section2').style.float = 'none';
      document.getElementById('section2').style.width = "100%";
      currentButton = buttonClicked;
      console.log("left " + buttonArray[3]);
    }
  }
</script>