用数学随机更改文本

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>