如何生成一個隨機數並將其分配給JavaScript中的變量數組？

我需要創建一個魔術8球網頁，當輸入問題時他們會產生一個隨機響應，然後他們點擊按鈕。到目前爲止，我有HTML和CSS來完成：如何生成一個隨機數並將其分配給JavaScript中的變量數組？

$(document).ready(function() { 
 
    $("button").click(function() { 
 
    var answer; 
 
    var my_num = getRandom(14); 
 
    var responses = Array(15); 
 
    responses[0] = "Ask again later..."; 
 
    responses[1] = "Yes"; 
 
    responses[2] = "No"; 
 
    responses[3] = "It appears to be so"; 
 
    responses[4] = "Reply is hazy, please try again"; 
 
    responses[5] = "Yes, definitely"; 
 
    responses[6] = "What is it you really want to know?"; 
 
    responses[7] = "Outlook is good"; 
 
    responses[8] = "My sources say no"; 
 
    responses[9] = "Signs point to yes"; 
 
    responses[10] = "Don't count on it"; 
 
    responses[11] = "Cannot predict now"; 
 
    responses[12] = "As I see it, yes"; 
 
    responses[13] = "Better not tell you now"; 
 
    responses[14] = "Concentrate and ask again"; 
 

 
    var RandNum = Math.floor(Math.random() * 14); 
 

 
    var answer = responses[RandNum]; 
 

 
    $("#Response").replaceWith(answer); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Magic 8 Ball</title> 
 
    <link rel="stylesheet" href="styles.css"> 
 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 
    <header> 
 
     <h1>Magic 8 Ball</h1> 
 
    </header> 
 
    <h3>What would you like to know?</h3> 
 
    <input type="text" name="txtQuestion" id="txtQuestion"> 
 
    <br /> 
 
    <input type="button" id="btnAsk" value="Ask the 8 Ball"> 
 
    <h3>The 8 Ball says:</h3> 
 
    <h3 id="Response">Ask the 8 Ball a question...</h3> 
 
    </div> 
 
    <script src="scripts/jquery-3.2.1.js"></script> 
 
    <script src="scripts/my_scripts.js"></script> 
 
</body> 
 

 
</html>

我一直在JavaScript中，但沒有我這樣做似乎產生什麼！這裏是我的代碼：

我真的不知道我做錯了什麼。我認爲我應該創建一個新的陣列，並提供所有可能的響應。然後我生成一個隨機數，並將其分配給數組變量以給我一個隨機響應。然後我用隨機生成的響應替換了存在的h3標籤。理論上聽起來不錯。然而，當我點擊按鈕時沒有任何作用。即使我手動分配一個響應，比如answer = respond [5]，也沒有任何反應。我在這裏錯過了什麼？

來源

2017-09-23 nponinski

有沒有'getRandom（）'函數。 – Barmar

謝謝巴爾瑪！你會得到贊成！ – nponinski

您的代碼中存在一些錯誤。當您使用<input type="button">時，您的目標是$('button')。更新後的代碼如下：

$(document).ready(function() { 
    var responses = []; 
    responses[0] = "Ask again later..."; 
    responses[1] = "Yes"; 
    responses[2] = "No"; 
    responses[3] = "It appears to be so"; 
    responses[4] = "Reply is hazy, please try again"; 
    responses[5] = "Yes, definitely"; 
    responses[6] = "What is it you really want to know?"; 
    responses[7] = "Outlook is good"; 
    responses[8] = "My sources say no"; 
    responses[9] = "Signs point to yes"; 
    responses[10] = "Don't count on it"; 
    responses[11] = "Cannot predict now"; 
    responses[12] = "As I see it, yes"; 
    responses[13] = "Better not tell you now"; 
    responses[14] = "Concentrate and ask again"; 
    var answer; 

    function getRandom(max) { 
    return Math.floor(Math.random() * max); 
    } 
    $("input[type=button]").click(function() { 
    var my_num = getRandom(14); 
    var answer = responses[my_num]; 
    $("#Response").text(answer); 
    }); 
});

在這種情況下，您不需要在Javascript中明確定義數組的大小。另外，您應該在這裏使用responses.push而不是顯式設置項目索引，但這裏不是破壞模式。

getRandom沒有定義，也許是別的地方。 $.replaceWith是用於替換元素，而不是文本，所以我改變了這一點。

來源

2017-09-23 00:19:24 Phix

非常感謝！我知道我很接近...... – nponinski

而不是'respond.push'或分配給索引，你應該使用一個數組literal：'respond = [「blah」，「blah」，「blah」，...] – Barmar

你的JavaScript源代碼應該是這樣的：

$(document).ready(function() { 
    var answer; 
    var responses = Array(15); 
    responses[0] = "Ask again later..."; 
    responses[1] = "Yes"; 
    responses[2] = "No"; 
    responses[3] = "It appears to be so"; 
    responses[4] = "Reply is hazy, please try again"; 
    responses[5] = "Yes, definitely"; 
    responses[6] = "What is it you really want to know?"; 
    responses[7] = "Outlook is good"; 
    responses[8] = "My sources say no"; 
    responses[9] = "Signs point to yes"; 
    responses[10] = "Don't count on it"; 
    responses[11] = "Cannot predict now"; 
    responses[12] = "As I see it, yes"; 
    responses[13] = "Better not tell you now"; 
    responses[14] = "Concentrate and ask again"; 

    $("input[type=button]").click(function() { 
     var RandNum = Math.floor(Math.random() * 14);  
     var answer = responses[RandNum];  
     $("#Response").html(answer); 
    }); 
});

的var my_num = getRandom(14);應該刪除，並且你應該使用html insted的的replaceWith保持#Response股利。

來源

2017-09-23 00:19:15

您的html中沒有按鈕元素，因此您必須將事件附加到"#btnAsk"也var my_num = getRandom(14)會給出錯誤，因爲getRandom（）尚未定義，並且不是必需的。

$(document).ready(function() { 
 
    $("#btnAsk").click(function() { 
 
    var answer; 
 

 
    var responses = Array(15); 
 
    responses[0] = "Ask again later..."; 
 
    responses[1] = "Yes"; 
 
    responses[2] = "No"; 
 
    responses[3] = "It appears to be so"; 
 
    responses[4] = "Reply is hazy, please try again"; 
 
    responses[5] = "Yes, definitely"; 
 
    responses[6] = "What is it you really want to know?"; 
 
    responses[7] = "Outlook is good"; 
 
    responses[8] = "My sources say no"; 
 
    responses[9] = "Signs point to yes"; 
 
    responses[10] = "Don't count on it"; 
 
    responses[11] = "Cannot predict now"; 
 
    responses[12] = "As I see it, yes"; 
 
    responses[13] = "Better not tell you now"; 
 
    responses[14] = "Concentrate and ask again"; 
 

 
    var RandNum = Math.floor(Math.random() * 14); 
 

 
    var answer = responses[RandNum]; 
 

 
    $("#Response").html(answer); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Magic 8 Ball</title> 
 
    <link rel="stylesheet" href="styles.css"> 
 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 
    <header> 
 
     <h1>Magic 8 Ball</h1> 
 
    </header> 
 
    <h3>What would you like to know?</h3> 
 
    <input type="text" name="txtQuestion" id="txtQuestion"> 
 
    <br /> 
 
    <input type="button" id="btnAsk" value="Ask the 8 Ball"> 
 
    <h3>The 8 Ball says:</h3> 
 
    <h3 id="Response">Ask the 8 Ball a question...</h3> 
 
    </div> 
 
    <script src="scripts/jquery-3.2.1.js"></script> 
 
    <script src="scripts/my_scripts.js"></script> 
 
</body> 
 

 
</html>

來源

2017-09-23 00:19:29 Dij

我沒有看到他有錯誤的選擇器，我不明白爲什麼它沒有報告有關未定義函數的錯誤。 – Barmar

是的，我也開始尋找這種方式 – Dij

如何生成一個隨機數並將其分配給JavaScript中的變量數組？

回答

相關問題