Réécriture du titre : dépannage des problèmes de sélection de valeurs et d'affectation de variables

Question

Pour le jeu du Pendu, j'ai quelques thèmes (ex : villes et animaux).

Lorsque l'utilisateur sélectionne l'un des thèmes, le résultat doit être l'un des éléments aléatoires du thème sélectionné. Par exemple : Londres ou passage piéton, etc.

Actuellement, je n'ai que des lettres aléatoires pour le thème choisi.

const cities = ["New York", "London", "Berlin"]
const animals = ["Alligator", "Alpaca", "Zebra"]

const topicsEl = document.querySelector("#topics")

function randomTopic(){
return topicsEl.value[Math.floor(Math.random()*topicsEl.value.length)]
}

topicsEl.addEventListener("change", function(){
    console.log(randomTopic());
})

<div class="select">
   <label for="topics">Choose a topic:</label>

   <select id="topics">
   <option value=cities>Cities</option>
   <option value=animals>Animals</option>
   </select>
</div>

Answer 1

Dans votre code existant, topicsEl.value 将是字符串“cities”或字符串“animals”（因为这些是 <select> la valeur de chaque option dans la case. ). Ces ne sont pas des variables globales que vous définissez en JavaScript, ce sont simplement des chaînes contenues dans le HTML.

Ensuite, entre randomTopic() 中，将该字符串作为数组访问，Javascript 将其解释为您希望将其视为该字符串中的字符数组。这就是为什么您会从单词中获得一个随机字母："animals"[0] 是字母 a，"animals"[1] se trouve la lettre n, et ainsi de suite.

Ce que vous essayezde faire est de sélectionner un élément aléatoire parmi les variables du tableau que vous avez nommées "ville" et "animal", mais vos fonctions n'essaient pas de toucher ces variables, elles n'agissent que sur les chaînes contenues dans le DOM. .

Vous devez donc ajouter une étape pour passer de la valeur de chaîne dans <select> au tableau auquel vous essayez d'accéder.

Vous avez défini les deux tableaux comme variables globales ; en théorie, ceux-ci pourraient être utilisés comme Cette paire de variables distinctes a été transformée en objet pour un accès plus facile : window.cities 或 window.animals 进行访问，因此您可以执行 window[topicsEl.value]

const topics = {
  cities: ["New York", "London", "Berlin"],
  animals: ["Alligator", "Alpaca", "Zebra"]
}

const topicsEl = document.querySelector("#topics")

function randomTopic() {
  // find the desired array:
  let topicArr = topics[topicsEl.value]
  // return a random element from that array:
  return topicArr[Math.floor(Math.random() * topicArr.length)]
}

topicsEl.addEventListener("change", function() {
  console.log(randomTopic());
})

  Choose a topic:

  
    Cities
    Animals
  

Answer 2

Vous semblez avoir du mal à obtenir des valeurs aléatoires pour une liste basée sur une sélection.

Actuellement, vous sélectionnez topicsEl.value une lettre aléatoire, plutôt qu'un élément aléatoire de la liste de sujets associée.

Vous devez décider sur quelle liste choisir en fonction de topicsEl.value. Cela peut être fait de manière dynamique si la valeur peut être utilisée comme clé (comme pour un dictionnaire), mais cela peut également être fait de manière statique.

Mais l'exécution statique entraîne un code dupliqué, comme dans une échelle if-else-if sans cesse croissante avec chaque nouvelle liste de sujets :

function randomTopic() {
  if (topicsEl.value === "cities") {
    // ... (use citites)
  } else if (topicsEl.value === "animals") {
    // ... (use animals)
  } // Etc. for every new topic
}

Faire cela résume dynamiquement la sélection de liste, en gardant les fonctionnalités simples. Comme suggéré précédemment, vous pouvez utiliser un dictionnaire à cette fin.

Par exemple, chaque attribut du dictionnaire pourrait être une liste de sujets, alors les valeurs de vos options doivent correspondre aux noms de leurs attributs correspondants :

const topics = {
  cities: [/*...*/],
  animals: [/*...*/]
};

const topicsEl = document.querySelector("#topics");

function randomTopic() {
  const list = topics[topicsEl.value];
  // ...
}

La sélection d'éléments aléatoires dans cette liste est similaire à la façon dont vous sélectionnez actuellement des lettres aléatoires :

function randomTopic() {
  const list = topics[topicsEl.value];
  return list[Math.floor(Math.random() * list.length)];
}

---

Personnellement, je trouve cette sélection aléatoire plus lisible si la génération d'index est dans une fonction distincte. Exemple :

const edibles = ["cheese", "ham", "bread", "banana", "peanuts"];
console.log(randomEdible());

function randomEdible() {
  return edibles[randomInt(0, edibles.length - 1)];
}

function randomInt(max = 100, min = 0) {
  if (max < min) {
    [max, min] = [min, max]; // Swap
  }
  
  return Math.floor(Math.random() * (max - min + 1) + min); // +1 to include max
}