Изменить текст с помощью математики случайный

Question

Я пытаюсь сделать Magic 8 Ball на codepen, но, к сожалению, я не могу получить текст. В настоящее время я использую 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>