javascript - 用数学随机更改文本

Question

我正在尝试在 codepen 上制作 Magic 8 Ball，但不幸的是我无法显示任何文本。目前，我正在使用 Math Random 来获得我需要的所有不同答案，但我对 html 和 JavaScript 如何交互非常模糊。这是我到目前为止所拥有的:

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>

Answer 1

您的代码只需稍作更改即可正常工作。为您的 .eball 类指定固定高度。

问题是您的 .eball div 以零内容开头，这会导致 div 完全折叠。由于没有要进入的“区域”，您将无法触发 mouseenter 事件。为您想要触发 mouseenter 的 div 提供固定大小(特别是高度)将解决此问题。另一种解决方案是使用一些初始文本或   启动 div，使其不为空。

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>