未捕获的 SyntaxError：标识符“按钮”已被声明

Question

您好，我的网站出现了一个小错误。我想使用 github 托管网站，所以我将我的脚本链接到我的 HTML 中，如下所示：

    <script src="assets/scripts/switch-content.js"></script>
    <script src="assets/scripts/loader.js"></script>
    <script src="assets/scripts/scroll-fade.js"></script>
    <script src="assets/scripts/scroll-top-load.js"></script>
    <script src="assets/scripts/shrinking-header.js"></script>
    <script src="assets/scripts/smooth scroll.js"></script>
    <script src="assets/scripts/burger-menu.js"></script>
    <script src="assets/scripts/card-flip.js"></script>

它们中的大多数都可以工作，但由于某种原因，我的移动版汉堡菜单和单击按钮时更改网站内容的脚本将无法正常工作。

这里是否有任何错误代码或者可能是因为 jquery 无法正确加载？ 我尝试单独链接脚本，就像我在下面所做的那样。

无效的代码：

// change activenav class, show the clicked element only and hide the others https://codepen.io/MohdHussein/pen/MWKEvdp


// grab all the buttons
let Buttons = document.querySelectorAll(".selectSection button");

// loop through the buttons using for..of 
for (let button of Buttons) {
  // listen for a click event 
  button.addEventListener('click', (e) => {
    // et = event target
    const et = e.target;
    // slect activenav class
    const activenav = document.querySelector(".activenav");
    // check for the button that has activenav class and remove it
    if (activenav) {
      activenav.classList.remove("activenav");
    }
    // add activenav class to the clicked element 
    et.classList.add("activenav");

    // select all classes with the name content
    let allContent = document.querySelectorAll('.contentsec');

    // loop through all content classes
    for (let contentsec of allContent) {
      // display the content if the class has the same data-attribute as the button 
      if (contentsec.getAttribute('data-number') === button.getAttribute('data-number')) {
        contentsec.style.display = "block";
      }
      // if it's not equal then hide it.
      else {
        contentsec.style.display = "none";
      }
    }
    this.fade(true); //Call fade method on click 
  });
}

$('.flip-container .flipper button').click(function() {
  // flip back previous hovered element
  $('.flip-container.hover').toggleClass('hover');
  // flip current element
  $(this).closest('.flip-container').toggleClass('hover');
});

$('.fbutton').click(function() {
  // flip current element
  $(this).closest('.flip-container').removeClass('hover');
});

let burger = document.getElementById('burger'),
     nav    = document.getElementById('main-nav'),
     slowmo = document.getElementById('slowmo');
   
burger.addEventListener('click', function(e){
    this.classList.toggle('is-open');
    nav.classList.toggle('is-open');
});

$(".main-nav").click(function(){
  burger.click();
})

Answer 1

由于无法查看您的其他脚本的内容，我们无法为您确定问题。

只要在脚本中声明 somewhere 就足够了，您声明了另一个名为 Buttons

的 JS 变量

您可以重命名此实例，但正如 cmets 中所指出的，这是使用全局变量的副作用。更好的方法是使用Immediately Invoked Function Expression (IIFE) 模式来避免污染全局范围

听起来很复杂，其实就是这么简单：

  <script>
    (function () {
          // grab all the buttons
    let Buttons = document.querySelectorAll(".selectSection button");
    
    // loop through the buttons using for..of 
    for (let button of Buttons) {
      // listen for a click event 
      button.addEventListener('click', (e) => {
        // et = event target
        const et = e.target;
        // slect activenav class
        const activenav = document.querySelector(".activenav");
        // check for the button that has activenav class and remove it
        if (activenav) {
          activenav.classList.remove("activenav");
        }
        // add activenav class to the clicked element 
        et.classList.add("activenav");
    
        // select all classes with the name content
        let allContent = document.querySelectorAll('.contentsec');
    
        // loop through all content classes
        for (let contentsec of allContent) {
          // display the content if the class has the same data-attribute as the button 
          if (contentsec.getAttribute('data-number') === button.getAttribute('data-number')) {
            contentsec.style.display = "block";
          }
          // if it's not equal then hide it.
          else {
            contentsec.style.display = "none";
          }
        }
        this.fade(true); //Call fade method on click 
      });
    }
    })();
</script>

Answer 2

Buttons 变量很可能在这些加载的脚本中的某处声明。

    <script src="assets/scripts/loader.js"></script>
    <script src="assets/scripts/scroll-fade.js"></script>
    <script src="assets/scripts/scroll-top-load.js"></script>
    <script src="assets/scripts/shrinking-header.js"></script>
    <script src="assets/scripts/smooth scroll.js"></script>
    <script src="assets/scripts/switch-content.js"></script>