Tulis Semula Tajuk: Menyelesaikan Masalah Pemilihan Nilai dan Isu Tugasan Pembolehubah

Question

Untuk permainan Hangman, saya mempunyai beberapa tema (cth: bandar dan haiwan).

Apabila pengguna memilih salah satu tema, hasilnya mestilah salah satu item rawak daripada tema yang dipilih. Contohnya: London atau lintasan zebra, dsb.

Buat masa ini saya hanya mempunyai huruf rawak untuk tema yang dipilih.

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

Dalam kod sedia ada anda, topicsEl.value 将是字符串“cities”或字符串“animals”（因为这些是 <select> nilai setiap pilihan dalam kotak. ). Ini bukan pembolehubah global yang anda takrifkan dalam JavaScript, ia hanyalah rentetan yang terkandung dalam HTML.

Kemudian, dalam randomTopic() 中，将该字符串作为数组访问，Javascript 将其解释为您希望将其视为该字符串中的字符数组。这就是为什么您会从单词中获得一个随机字母："animals"[0] 是字母 a，"animals"[1] ialah huruf n, dan seterusnya.

Apa yang anda cuba lakukan ialah memilih item rawak daripada pembolehubah tatasusunan yang anda namakan "Bandar" dan "Haiwan", tetapi fungsi anda tidak cuba menyentuh pembolehubah ini, ia hanya bertindak pada rentetan yang terkandung dalam DOM .

Jadi anda perlu menambah langkah untuk mendapatkan daripada nilai rentetan dalam <select> kepada tatasusunan yang anda cuba akses.

Anda telah menentukan kedua-dua tatasusunan sebagai pembolehubah global secara teori, ini boleh digunakan sebagai window.cities 或 window.animals 进行访问，因此您可以执行 window[topicsEl.value] Ini akan mengembalikan tatasusunan yang anda cuba akses....ia bukan amalan yang baik untuk bergantung pada pembolehubah global tetingkap, jadi, jadi Saya menggalakkan anda untuk Pasangan pembolehubah berasingan ini telah ditukar kepada objek untuk akses yang lebih mudah:

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

Anda nampaknya menghadapi masalah mendapatkan nilai rawak untuk senarai berdasarkan pemilihan.

Pada masa ini, anda memilih topicsEl.value huruf rawak, bukannya elemen rawak senarai topik yang berkaitan.

Anda perlu memutuskan senarai mana yang hendak dipilih berdasarkan topicsEl.value. Ini boleh dilakukan secara dinamik jika nilai boleh digunakan sebagai kunci (seperti untuk kamus), tetapi ini juga boleh dilakukan secara statik.

Tetapi pelaksanaan statik menghasilkan kod pendua, seperti dalam tangga if-else-if yang sentiasa berkembang dengan setiap senarai topik baharu:

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

Melakukan ini secara dinamik menghilangkan pemilihan senarai, mengekalkan fungsi yang mudah. Seperti yang dicadangkan sebelum ini, anda boleh menggunakan kamus untuk tujuan ini.

Sebagai contoh, setiap atribut kamus boleh menjadi senarai topik, maka nilai pilihan anda hendaklah sepadan dengan nama atribut yang sepadan:

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

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

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

Memilih item rawak daripada senarai ini adalah serupa dengan cara anda memilih huruf rawak pada masa ini:

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

---

Secara peribadi, saya dapati pemilihan rawak ini lebih mudah dibaca jika penjanaan indeks berada dalam fungsi yang berasingan. Contoh:

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
}