Znaków ampersandów, właściwości obiektów i wewnętrzne elementy HTML przycisków

Nov 22 2020

Piszę skrypt JS, który ma obiekt z &'s w niektórych swoich właściwościach, np

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

Chodzi o to, że kiedy próbuję iterować po wartościach właściwości, np

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

nie powiedzie się, jeśli właściwość ma „&”, nie może obliczyć t .

Oto powiązane części i funkcje:

Przycisk, który po kliknięciu wyświetla menu rozwijane z głównymi tematami, które zostaną wypełnione przez skrypt z właściwościami topicObj.

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

  </div>
</div>

Dodanie tematu „newTopic” do menu rozwijanego topicsDD; Używam charAt(0)topicDD dla funkcji, setTopicaby określić, czy jest to temat główny, czy podrzędny

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

Zastąpienie MainTBtn innerHTMLtematem wybranym z DDown, jedną z właściwości obiektu i zresetowanie / zapełnienie podtematów DDown menu

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

Wyczyść listę rozwijaną i wypełnij ją odpowiednimi elementami: właściwościami topicObj, jeśli jest to menu główne „tematy główne”, lub wartością odpowiedniej właściwości, jeśli jest to menu podtematów. Tutaj kończy się niepowodzeniem, gdy wybrany temat główny ma znak „&”. Podążając za kolejnym wątkiem , dla celów testowych, teraz wystarczy wysłać "temat główny -> Temat podrzędny" dla wszystkich podtematów wybranego głównego do dziennika konsoli.

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;
  }
}

Kiedy testuję selMTopic = "Client & Peripherals", działa dobrze, konsola wyświetla wszystkie jej podtematy. Kiedy używam selMTopic = document.getElementById("MainTBtn").innerHTML, czego potrzebuję, otrzymuję w Chrome:

„DropTest MultiDD.htm: 239 Uncaught TypeError: topicObj [selMTopic] nie można iterować w resetTopics (DropTest MultiDD.htm: 239)”

Firefox:

„Uncaught TypeError: topicObj [selMTopic] is undefined resetTopics file: ///.../DropTest MultiDD.htm: 239”

Linia 239 jest for (let t of topicObj[selMTopic])wfunction resetTopics(topicsDD)

Masz pojęcie, dlaczego iteracja właściwości obiektu nie akceptuje przycisku, innerHTMLgdy ma on znak „&”?

Odpowiedzi

rajeshpillai Nov 22 2020 at 17:18

Używasz pętli for of.

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