Überarbeitung des Titels: Fehlerbehebung bei Wertauswahl und Variablenzuweisungsproblemen

Question

Für das Hangman-Spiel habe ich einige Themen (z. B. Städte und Tiere).

Wenn der Benutzer eines der Themen auswählt, sollte das Ergebnis eines der zufälligen Elemente aus dem ausgewählten Thema sein. Zum Beispiel: London oder Zebrastreifen usw.

Derzeit habe ich nur zufällige Buchstaben für das gewählte Thema.

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

在您现有的代码中，topicsEl.value 将是字符串“cities”或字符串“animals”（因为这些是 <select> 框中每个选项的值。）。这些不是您在 JavaScript 中定义的全局变量，它们只是 HTML 中包含的字符串。

然后，在 randomTopic() 中，将该字符串作为数组访问，Javascript 将其解释为您希望将其视为该字符串中的字符数组。这就是为什么您会从单词中获得一个随机字母："animals"[0] 是字母 a，"animals"[1] 是字母 n，依此类推。

您尝试要做的是从您命名为“城市”和“动物”的数组变量中选择一个随机项目，但您的函数不会尝试触及这些变量，它们只作用于 DOM 中包含的字符串。

因此，您需要添加一个步骤，从 <select> 中的字符串值获取到您尝试访问的数组。

您已将两个数组定义为全局变量；理论上，这些可以作为 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

您似乎在根据选择获取列表的随机值时遇到问题。

目前，您正在选择 topicsEl.value 的随机字母，而不是关联主题列表的随机元素。

您需要根据 topicsEl.value 确定要选择的列表。如果该值可以用作键（例如对于字典），则可以动态地实现这一点，但这也可以是静态完成。

但是静态执行会导致重复代码，例如在每个新主题列表不断增长的 if-else-if 阶梯中：

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

动态地执行此操作可以抽象出列表选择，从而保持功能简单。正如之前所建议的，可以使用字典来实现此目的。

例如，字典的每个属性都可以是主题列表，然后您的选项值应与其相应属性的名称匹配：

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

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

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

选择该列表中的随机项目类似于您当前选择随机字母的方式：

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

---

就我个人而言，如果索引生成位于单独的函数中，我发现这种随机选择更具可读性。示例：

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