Javascript 根据屏幕位置更改InnerHTML？

我需要一个项目的帮助。我在我们的网站上有一个评论部分，当用户滚动到某个点并执行以下操作时，我希望有一个按钮显示：

当

#comments

点击视口顶部，以及

innerHTML='留下评论'

当用户单击按钮时，

#review_表单

使用

scrollIntoView（）

方法滚动到视图中

这将使用户转到

#review#u form

div，浏览器将识别

#review#u form

div现在位于浏览器视口的顶部，并将其更改为

保留一个review

至

滚动至顶部

我还没有到达这里，但我想将

onClick

函数从

scrollIntoView（）

更改为实际滚动到页面顶部

我的问题是，我用下面的代码做这件事是正确的吗？

else if

语句不起作用。我也不知道如何更改按钮的

onClick

我需要创建两个独立的

吗

HTML:

<button onClick="scrollToComment()" id="scroll-btn"></button>

<div id="comments">
  //a bunch of reviews and comments go here
</div>

<div id="review_form">
  //review form here
</div>

window.addEventListener('scroll', function() {
    const comments = document.querySelector('#comments');
    const commentsPosition = comments.getBoundingClientRect();
    const scrollBtn = document.querySelector('#scroll-btn');
    const review = document.querySelector('#review_form');
    const reviewPosition = review.getBoundingClientRect();

     if( commentsPosition.top < -1 && commentsPosition.top < 1 ) {
        scrollBtn.style.display = 'block';
        document.getElementById('scroll-btn').innerHTML = 'LEAVE A REVIEW';
    }

    else if( reviewPosition.top < -1 && reviewPosition.top < 1 ) {

        //not working:
        document.getElementById('scroll-btn').innerHTML = 'BACK TO TOP';
    }

    else {

        scrollBtn.style.display = 'none';

    }
});

// scroll to review form
function scrollToComment() {
    var button = document.querySelector('#review_form');
    button.scrollIntoView();

}

//这里有很多评论和评论
//请在此查看表单

JS:

<button onClick="scrollToComment()" id="scroll-btn"></button>

<div id="comments">
  //a bunch of reviews and comments go here
</div>

<div id="review_form">
  //review form here
</div>

window.addEventListener('scroll', function() {
    const comments = document.querySelector('#comments');
    const commentsPosition = comments.getBoundingClientRect();
    const scrollBtn = document.querySelector('#scroll-btn');
    const review = document.querySelector('#review_form');
    const reviewPosition = review.getBoundingClientRect();

     if( commentsPosition.top < -1 && commentsPosition.top < 1 ) {
        scrollBtn.style.display = 'block';
        document.getElementById('scroll-btn').innerHTML = 'LEAVE A REVIEW';
    }

    else if( reviewPosition.top < -1 && reviewPosition.top < 1 ) {

        //not working:
        document.getElementById('scroll-btn').innerHTML = 'BACK TO TOP';
    }

    else {

        scrollBtn.style.display = 'none';

    }
});

// scroll to review form
function scrollToComment() {
    var button = document.querySelector('#review_form');
    button.scrollIntoView();

}

window.addEventListener（'scroll'，function（）{
const comments=document.querySelector（“#comments”）；
const commentsPosition=comments.getBoundingClientRect（）；
const scrollBtn=document.querySelector（“#scrollBtn”）；
const review=document.querySelector（“#review_form”）；
const reviewPosition=review.getBoundingClientRect（）；
if（commentsPosition.top<-1&&commentsPosition.top<1）{
scrollBtn.style.display='block'；
document.getElementById（'scroll-btn'）。innerHTML='leavea REVIEW'；
}
否则如果（reviewPosition.top<-1&&reviewPosition.top<1）{
//不工作：
document.getElementById（'scroll-btn'）。innerHTML='backtotop'；
}
否则{
scrollBtn.style.display='none'；
}
});
//滚动查看表单
函数scrollToComment（）{
var按钮=document.querySelector（“#审阅表单”）；
scrollIntoView（）；
}

首先，如果你的情况很奇怪：

if（commentsPosition.top<-1&&commentsPosition.top<1）

如果

commentsPosition.top

小于-1，则它也小于1，因此不需要此部分

&&commentsPosition.top<1

现在，考虑到HTML中的

#review_form

位于

#comments

之后，我假设您的审阅表单位于您的comments部分下面。因此无法到达

else if

块，因为如果

else if

为真，则意味着

if

也为真。如果您的

if

为false，那么您的

else if

也为false

这是你可以看到的第一点

如果要动态更改单击功能，可以这样做，并从html中删除onClick：

const scrollBtn = document.querySelector('#scroll-btn');
scrollBtn.addEventListener('click', () => {
    if(condition){
        //scroll to review form
    } else if (condition){
        //scroll to top
    }
  }
);

---

谢谢，@Harianrod！我很感谢你的解释，因为我是新来的，正在学习JS。我将调整一些代码，并使用EventListener（“单击”），这是一个巨大的帮助。