JAVASCRIPT 只有第一个函数在我的 window.onscroll 函数上工作

Question

我是 javascript 的新手，我正在尝试根据滚动位置在不同时间使用这两个函数运行，但只有第一个函数 'myFunction1' 是运行宁。请帮忙。

<script>
 

window.onscroll = function redblob() {myFunction()

function myFunction() {
  if (document.body.scrollTop > 250 && document.body.scrollTop < 1200 || 
  document.documentElement.scrollTop > 250  && document.documentElement.scrollTop < 1200  ) {
    document.getElementById("redblob").classList.add('scale-transition');
  } 

 
  else {
    document.getElementById("redblob").classList.remove('scale-transition');
  }
  
  
}

function myFunction2() {
  if (document.body.scrollTop > 1200 && document.body.scrollTop < 1700 || 
  document.documentElement.scrollTop > 1200  && document.documentElement.scrollTop < 1700  ) {
    document.getElementById("blueblob").classList.add('scale-transition');
 
  } 

 
  else {
    document.getElementById("blueblob").classList.remove('scale-transition');
 
  }
  
  
}
};
  
</script>

Answer 1

您正在重复使用函数名称 myFunction()。我将第二个重命名为 myFunction1() （这就是你所说的它应该在你的问题中命名）并在它之前添加了一个函数声明。这导致错误消失。

<script>
 
window.onscroll = function redblob() {
    function myFunction() {
        function myFunction1() {
            if ((document.body.scrollTop > 250) && (document.body.scrollTop < 1200) || (document.documentElement.scrollTop > 250) && (document.documentElement.scrollTop < 1200)) {
                document.getElementById("redblob").classList.add('scale-transition');
            } else {
                document.getElementById("redblob").classList.remove('scale-transition');
            }
        }

        function myFunction2() {
            if (document.body.scrollTop > 1200 && document.body.scrollTop < 1700 || document.documentElement.scrollTop > 1200 && document.documentElement.scrollTop < 1700) {
                document.getElementById("blueblob").classList.add('scale-transition');
            } else {
                document.getElementById("blueblob").classList.remove('scale-transition');
            }
        }
    }
}

</script>

Answer 2

感谢 Daniel 的帮助，正如你所注意到的，我确实重用了函数名称 myFunction。我将名称更改为 function1 并将其添加到第一个函数中，它运行良好。

window.onscroll = function functionname() { myFunction2(); myFunction1(); 

function myFunction1() {
  if (document.body.scrollTop > 250 && document.body.scrollTop < 1200 || 
  document.documentElement.scrollTop > 250  && document.documentElement.scrollTop < 1200  ) {
    document.getElementById("redblob").classList.add('scale-transition');

  } 

 
  else {
    document.getElementById("redblob").classList.remove('scale-transition');

  }
  
  
}

function myFunction2() {
  if (document.body.scrollTop > 1200 && document.body.scrollTop < 1700 || 
  document.documentElement.scrollTop > 1200  && document.documentElement.scrollTop < 1700  ) {
    document.getElementById("blueblob").classList.add('scale-transition');

  } 

 
  else {
    document.getElementById("blueblob").classList.remove('scale-transition');

  }
  
  
}
};

JAVASCRIPT 只有第一个函数在我的 window.onscroll 函数上工作

JAVASCRIPT only the first function is working on my window.onscroll function

javascript

arrays

function

if-statement

onscroll