如何在HTML中将脚本集成到函数中？

我想做一个html按钮，当你向下滚动，点击时会显示一个随机的博客帖子

我有代码让它在你向下滚动时出现，还有一个显示随机帖子的按钮的代码。但我不知道如何让他们一起工作

这是我的滚动按钮代码，下面是随机张贴代码。我不知道如何将它集成到TopFunction中

非常感谢您的帮助和见解

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
</style>

<button onclick="topFunction()" id="myBtn"></button>

<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

// When the user clicks on the button, show random post
function topFunction() {


}
</script>

#myBtn{
显示：无；
位置：固定；
底部：20px；
右：30px；
z指数：99；
字号：18px；
边界：无；
大纲：无；
背景色：红色；
颜色：白色；
光标：指针；
填充：15px；
边界半径：4px；
}
#myBtn：悬停{
背景色：#555；
}
//当用户从文档顶部向下滚动20px时，显示按钮
window.onscroll=function（）{scrollFunction（）}；
函数滚动函数（）{
if（document.body.scrollTop>20 | | document.documentElement.scrollTop>20）{
document.getElementById（“myBtn”）.style.display=“block”；
}否则{
document.getElementById（“myBtn”）.style.display=“无”；
}
}
//当用户单击按钮时，显示random post
函数topFunction（）{
}

随机张贴

<script type="text/javascript">
function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'RANDOM POST'; document.getElementById('myBtn').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=feelingLucky">
</script>

函数showLucky（root）{var feed=root.feed；var entries=feed.entry | |【】；var entry=feed.entry[0]；for（var j=0；j

我不知道下面的内容是否正确。为了正确地帮助您，我们需要知道代码的来源。您需要详细解释您尝试过的内容

下面可能有用：我添加了一个

，当点击按钮时，它应该包含随机的帖子。内容可以按照您的意愿进行样式设置

注意脚本中的路径

/feeds/posts/summary？max results=0&；alt=json&；callback=feelingLucky

。这是硬编码的，JS脚本会更改其中的一些单词。这需要与您自己的folderstructure相同（和代码中的一个）

我还对您的代码进行了一些清理…始终使用

id

作为脚本，使用

class

作为CSS样式

//当用户从文档顶部向下滚动20px时，显示按钮
window.onscroll=函数（）{
scrollFunction（）
};
函数滚动函数（）{
if（document.body.scrollTop>20 | | document.documentElement.scrollTop>20）{
document.getElementById（“myBtn”）.style.display=“block”；
}否则{
document.getElementById（“myBtn”）.style.display=“无”；
}
}
//当用户单击按钮时，显示random post
函数topFunction（）{
//为什么这是空的？
};
函数（根）{
var feed=root.feed；
var entries=feed.entry | |[]；
var entry=feed.entry[0]；
对于（变量j=0；j

.myBtn{
显示：块；
位置：固定；
底部：20px；
右：30px；
z指数：99；
字号：18px；
边界：无；
大纲：无；
背景色：红色；
颜色：白色；
光标：指针；
填充：15px；
边界半径：4px；
}
.myBtn:悬停{
背景色：#555；
}
myDiv先生{
宽度：50%；
高度：自动；
背景：rgba（255,0,0,0.5）；
}

试试我
这里有些东西。。。

只需在按钮

onclick

事件中将对空

topFunction（）

的调用替换为

showLucky（）

（当然，还包括页面中的随机post脚本）。我想知道如何在调用topfunction时执行random post脚本。我将其留空，因为我想在此处执行random post脚本。random post脚本包含多个函数。如果您尝试Simon的答案，您会发现忽略

topfunction

并使用

showLucky

直接。它将使您的代码不那么混乱，更容易理解。