Comment générer un nombre aléatoire et l'assigner à ma variable tableau en JavaScript?

J'ai besoin de créer une page web magique de 8 balles qui génère une réponse aléatoire quand une question est tapée et ils cliquent sur le bouton. Jusqu'à présent, j'ai le code HTML et CSS fait:Comment générer un nombre aléatoire et l'assigner à ma variable tableau en 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>

Je travaille sur le JavaScript, mais rien que je ne semble rien produire! Voici mon code:

Honnêtement, je ne sais pas ce que je fais mal. Je pensais que je devrais créer un nouveau tableau avec toutes les réponses possibles. Ensuite, je génère un nombre aléatoire, et l'assigner à la variable tableau pour me donner une réponse aléatoire. Puis j'ai remplacé l'étiquette h3 qui existe avec la réponse que j'ai générée aléatoirement. Sonnait bien en théorie. Pourtant, rien ne fonctionne quand je vais cliquer sur le bouton. Même si j'attribue manuellement une réponse, dites answer = responses [5], rien ne se passe. Qu'est-ce que j'oublie ici?

Source

2017-09-23 nponinski

Il n'y a pas la fonction 'getRandom()'. – Barmar

Merci Barmar! Vous obtenez un upvote pour ça! – nponinski

Il y a quelques erreurs dans votre code. Vous ciblez $('button') lorsque vous utilisez <input type="button">. Code mis à jour ci-dessous:

$(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); 
    }); 
});

Vous n'avez pas besoin de définir explicitement la taille d'un tableau dans Javascript dans ce cas. En outre, vous devez utiliser responses.push ici au lieu de définir explicitement l'index des éléments, mais ce n'est pas un motif de rupture ici.

getRandom n'a pas été défini, peut-être qu'il était ailleurs. $.replaceWith est pour le remplacement des éléments, pas de texte, donc j'ai changé cela aussi.

Source

2017-09-23 00:19:24 Phix

Merci beaucoup! Je savais que j'étais proche ... – nponinski

Au lieu de 'responses.push' ou d'assigner aux index, vous devriez simplement utiliser un tableau littéral:' responses = ["blah", "blah", "blah", ...] ' – Barmar

Votre code source javascript doit ressembler à ceci:

$(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); 
    }); 
});

Le var my_num = getRandom(14); devrait être supprimé et et vous devez utiliser html insted de replaceWith pour garder le #Response div.

Source

2017-09-23 00:19:15

il n'y a aucun élément de bouton dans votre code HTML, donc vous devez attacher l'événement à "#btnAsk" et var my_num = getRandom(14) donnera une erreur puisque getRandom() n'a pas été défini, et ce n'est pas obligatoire.

$(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>

Source

2017-09-23 00:19:29 Dij

Je n'ai pas vu qu'il avait le mauvais sélecteur, je ne pouvais pas comprendre pourquoi il ne rapportait pas une erreur sur la fonction indéfinie. – Barmar

ouais, j'ai commencé à chercher de cette façon aussi – Dij

Comment générer un nombre aléatoire et l'assigner à ma variable tableau en JavaScript?

Répondre

Questions connexes