用数学随机更改文本

Question

我想在codepen上制作一个Magic 8球，但不幸的是我无法获得任何文本出现。目前我正在使用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事件。给你div你想触发mouseenter在一个固定的大小（特别是高度）将解决这个问题。另一种解决方案是用一些初始文本或 开始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>