Dari ampersand, properti objek, dan innerHTML dari Buttons

Question

Saya sedang menulis skrip JS yang memiliki objek dengan & di beberapa propertinya, misalnya

var topicObj = {
  "Client & Peripherals": ["USB", "Printer", "Copy/Paste"],
  "Install & Upgrade": ["Tenant Upgrade", "Agent upgrade"],
  "DEM": ["Self Service", "Manager", "Smart policies", "GPO", "Configuration"]
}

Masalahnya adalah, ketika saya mencoba mengulang nilai properti, misalnya

selMTopic = "Client & Peripherals"
for (let t of topicObj[selMTopic])) {
  addTopic(topicsDD,topicObj[selMTopic][t]);
}

gagal jika properti memiliki "&", ia tidak dapat menghitung t .

Ini adalah bagian dan fungsi terkait:

Tombol yang, ketika diklik, menampilkan menu dropdown dengan topik utama, yang akan diisi oleh skrip dengan properti topicObj.

<div class="dropdown">
  <button onclick="toggleDdown('MainDropdown')" class="dropbtn" id="MainTBtn">Choose Main Topic</button>
  <div id="MainDropdown" class="dropdown-content">

  </div>
</div>

Menambahkan topik "newTopic" ke menu tarik-turun topicsDD; Saya menggunakan charAt(0)topicsDD untuk fungsi setTopicuntuk mengidentifikasi apakah itu utama atau sub topik

function addTopic(topicsDD,newTopic){
  let topics = document.getElementById(topicsDD);
  let topic = document.createElement('a');
  topic.addEventListener("click",function () {setTopic(topicsDD.charAt(0).concat(newTopic))});
  topic.innerHTML = newTopic;
  topics.appendChild(topic);
}

Mengganti MainTBtn innerHTMLdengan topik yang dipilih dari DDown, salah satu properti objek, dan mengatur ulang / mengisi sub-topik menu DDown

function setTopic(newTopic) {
  var mTBtn = document.getElementById("MainTBtn");
  switch (newTopic.charAt(0)) {
    case "M":
      mTBtn.innerHTML = newTopic.substr(1);
      resetTopics("SubDropdown");
    break;
  ...

Hapus daftar tarik-turun dan isi dengan item yang sesuai: properti topicObj jika itu adalah menu DDown "topik utama" atau nilai properti terkait jika itu adalah menu subtopik. Di sinilah gagal, ketika topik utama yang dipilih memiliki "&". Mengikuti utas lain , untuk tujuan pengujian, sekarang hanya mengirim "topik utama -> Sub topik" untuk semua sub-topik utama yang dipilih ke log konsol.

function resetTopics(topicsDD){
  var topicObj = {
    "Client & Peripherals": ["USB", "Printer", "Copy/Paste"],
    "Install & Upgrade": ["Tenant Upgrade", "Agent upgrade"],
    "DEM": ["Self Service", "Manager", "Smart policies", "GPO", "Configuration"]
  }
  let topics = document.getElementById(topicsDD);
  var selMTopic;
  topics.innerHTML = '';
  switch (topicsDD.charAt(0)) {
    case "M":
      for (let t in topicObj) {
        addTopic(topicsDD,t);
      }
      break;
    case "S":
      selMTopic = document.getElementById("MainTBtn").innerHTML;
      //selMTopic = "Client & Peripherals";
        for (let t of topicObj[selMTopic])
        {
          console.log( selMTopic,'->', t );
        }
      break;
  }
}

Ketika saya menguji dengan selMTopic = "Client & Peripherals", itu berfungsi dengan baik, konsol mengeluarkan semua sub-topiknya. Saat saya menggunakan selMTopic = document.getElementById("MainTBtn").innerHTML, yang saya butuhkan, saya masuk ke Chrome:

"DropTest MultiDD.htm: 239 Uncaught TypeError: topicObj [selMTopic] tidak dapat diulang di resetTopics (DropTest MultiDD.htm: 239)"

Firefox:

"Tidak Tertangkap TypeError: topicObj [selMTopic] tidak ditentukan file resetTopics: ///.../DropTest MultiDD.htm: 239"

Baris 239 for (let t of topicObj[selMTopic])masukfunction resetTopics(topicsDD)

Adakah ide mengapa iterasi properti objek tidak menerima tombol innerHTMLjika memiliki "&"?

Answer 1

Anda menggunakan for of loop.

selMTopic = "Client & Peripherals"
for (let t of topicObj[selMTopic])) {
   console.log(t);  // Check this value
   addTopic(topicsDD,t);  // Something like this
}