Issue
I'm new to coding so apologies, I'm trying to do this thing where a button displays a random fun fact when clicked, but I also wanted to add a feature that, if hovered for long enough, the button text changes up to 3 times (at 3s, 5s, and 8s) and then stays on the last hover (8s one) until clicked, where it comes back to the first non hovered button text. Here's what I was working with. also, if anyone knows of a way to disable antialiasing, that'd be amazing as well
edit: apparently im not the best at explaining. i was looking to change the button text, not the fun fact. fun facts would only appear when clicked, i want the button text (the "click me for a fun fact") to change into 3 other texts when hovered for long enough, so for example, text a would change into text b after 3 seconds, then text b would change into text c after 5 seconds have passed since the hovering started, and then into text d after 8 seconds of constant hovering (so it would only happen after a total of 8 hovering seconds, changing at 3s, 5s and 8s). after that it should stay as text d until clicked. once its clicked, it should return to text a ("click me for a fun fact") and display a random fun fact
<!DOCTYPE html>
<html>
<head>
<style>
button {
display: inline-block;
background-color: #c0c0c0;
border-top: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid black;
border-bottom: 2px solid black;
color: black;
text-align: center;
font-size: 15px;
font-family: yay;
padding: 5px;
width: 150px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.1s;
}
.button {
transition: 0.2s;
}
.button:hover {
transition-delay: 3s;
}
</style>
</head>
<body>
<script>
var quotes = [
'fun fact 1',
'fun fact 2',
'fun fact 3',
'fun fact 4',
'fun fact 5'
]
function newQuote() {
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}
</script>
<button onclick="newQuote()">click me for a fun fact</button>
<div id="quoteDisplay">
</div>
</body>
</html>Solution
To count seconds, setInterval() is here to help, you can do something every x second(s).
In this case, we want to check if the user hovered for 3,5 and 8sec, so we change the timer every seconds, when it reaches what we want, we call newQuotes(), then stop recording time when our timer is over 8sec, or if the user is not hovering the button anymore.
var quotes = [
'fun fact 1',
'fun fact 2',
'fun fact 3',
'fun fact 4',
'fun fact 5'
]
var myButtonText = [
'a button text',
'another button text',
'one more button text'
]
var timer=0, timerIdle=false, interval, text=0;
function newQuote() {
document.getElementById("myButton").innerText = "click me for a fun fact";
text = 0;
timer = 0;
if(quotes.length > 0) {
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
//Remove item to avoid repetition
const index = quotes.indexOf(quotes[randomNumber]);
if(index > -1){
quotes.splice(index, 1);
}
}
}
function hoverMe() {
if(!timerIdle){
// Do something every 1 second
interval = setInterval(function(){
if(timer>8){
//if timer goes over 8sec, stop doing something on hover
timerIdle = true;
} else {
timer++;
// if timer == 3,5 or 8 call newQuote();
if([3,5,8].indexOf(timer) > -1 ) {
console.log(timer)
document.getElementById("myButton").innerText = myButtonText[text];
text++;
}
}
}, 1000);
}
}
// stop the interval if user is not hovering the button
function mouseLeave() {
clearInterval(interval)
}button {
display: inline-block;
background-color: #c0c0c0;
border-top: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid black;
border-bottom: 2px solid black;
color: black;
text-align: center;
font-size: 15px;
font-family: yay;
padding: 5px;
width: 150px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.1s;
}
.button {
transition: 0.2s;
}
.button:hover {
transition-delay: 3s;
}<!DOCTYPE html>
<html>
<body>
<button id="myButton" onclick="newQuote()" onmouseover="hoverMe()" onmouseleave="mouseLeave()">click me for a fun fact</button>
<div id="quoteDisplay"></div>
</body>
</html>Answered By - Killick
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.