CODEWITHSUNDEEP
javascripthtml
Kristine W.
Kristine W.

Reputation: 3

Change text with math random

I am trying to make a Magic 8 Ball on codepen, but unfortunately I cannot get any text to appear. Currently I am using Math Random to get all of the different answers I need, but I'm pretty fuzzy as to how the html and JavaScript interact. Here's what I have so far:

HTML:

//JavaScript:

var words = [
  'It is certain',
  'It is decidedly so',
  'Etc',
];

var getRandomWord = function () {
  return words[Math.floor(Math.random() * words.length)];
 };
  
$(function() {
  $('.eball').mouseenter(function(){
    $('.textbox').html(getRandomWord());
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="eball">
    <div class="triangle"></div>
    <div class="textbox"></div>
    </div>
</div>

Upvotes: 0

Views: 503

Answers (1)

Jecoms
Jecoms

Reputation: 2848

Your code works fine with a minor change. Give your .eball class a fixed height.

The problem is that your .eball div starts with zero content, which causes the div to collapse completely. You will be unable to fire the mouseenter event since there is no "area" to enter. Giving the div you want to trigger mouseenter on a fixed size (specifically a height) will solve this issue. Another solution would be to start the div with some initial text or a &nbsp; so it's not empty.

var words = [
  'It is certain',
  'It is decidedly so',
  'Etc',
];

var getRandomWord = function () {
  return words[Math.floor(Math.random() * words.length)];
};

$(function() {
  $('.eball').mouseenter(function(){
    $('.textbox').html(getRandomWord());
  });
});
.eball {
  color: white;
  text-align: center;
  background-color: grey;
  height: 50px;
  width: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="eball">
  <p class="textbox"></p>
</div>

Upvotes: 2

Related Questions