text changing multiple times when hovered for long enough-CodePudding

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>

CodePudding user response：

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()" onm ouseover="hoverMe()" onm ouseleave="mouseLeave()">click me for a fun fact</button>
  <div id="quoteDisplay"></div>
</body>

</html>

CodePudding user response：

You can try the below implementation with some explanation

var quotes = [
  'fun fact 1',
  'fun fact 2',
  'fun fact 3',
  'fun fact 4',
  'fun fact 5'
];

var selectedQuote = ""

//shuffle to make it non-duplicated records
function shuffle(array) {
  var i = array.length,
j = 0,
temp;
  while (i--) {
j = Math.floor(Math.random() * (i   1));
temp = array[i];
array[i] = array[j];
array[j] = temp;
  }
  return array;
}

function newQuote() {

  if (!selectedQuote) {
var randomNumber = Math.floor(Math.random() * (quotes.length));
selectedQuote = quotes[randomNumber]
  }
  document.getElementById('quoteDisplay').innerHTML = selectedQuote;
}

var timer = [3000, 5000, 8000]; //3s, 5s, 8s
var interval;

//generate quotes when a user hovers over the element
function mouseOver() {
  var currentTimerIndex = 0;
  var passedTime = 0;
  var timeStack = 1000;
  var shuffledQuotes = shuffle(quotes); //randomize quotes
  interval = setInterval(function() {
passedTime  = timeStack;
if (currentTimerIndex > timer.length - 1) {
  clearInterval(interval);
  interval = null;
  return;
}
if (timer[currentTimerIndex] <= passedTime) {
  document.getElementById('quoteButton').innerHTML = shuffledQuotes[currentTimerIndex];
  selectedQuote = shuffledQuotes[currentTimerIndex];
  currentTimerIndex  ;
}
  }, timeStack)
}

//stop quote generations
function mouseOut() {
  if (interval) {
clearInterval(interval);
interval = null;
  }
}

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;
}

<button onclick="newQuote()" onm ouseover="mouseOver()" onm ouseout="mouseOut()" id="quoteButton">click me for a fun fact</button>
<div id="quoteDisplay">
</div>