How to integrate a script into a function in HTML? - html

Question

I want to make a html button that appears when you scroll down and when clicked it shows a random blogger post.
I have code to make it appear when you scroll down and code for a button that shows a random post. But I don't know how to make them work together.
This is my scroll button code, below is random post code. I don't know how to integrate it inside TopFunction.
Thank you very much for your help and insights!
#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>
RANDOM POST
<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&alt=json-in-script&callback=feelingLucky">
</script>

Answer 1

I have no idea if below is correct or not. In order to help you correctly we need to know WHERE the codes are coming from. And you need to explain into detail what you have tried.
Below might work: I have added a <div> for which should contain the random posts when button is clicked. Content can be styled as you wish.
Be aware of the path /feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky. This is hardcoded and the JS script change some word in it. This needs to be the same (and the one in the code) to your own folderstructure.
I have also cleared up your code a little... Always use id for scripts and class for CSS styling.
// 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() {
//Why is this empty?
};
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('randompost')[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);
};
.myBtn {
display: block;
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;
}
.myDiv {
width: 50%;
height: auto;
background: rgba(255,0,0,0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="showLucky()" id="myBtn" class="myBtn">Try me</button>
<div class="myDiv" id="randompost" >
<script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
</script>
Something here...
</div>