Von kaufmännischem Und, Objekteigenschaften und innerHTMLs von Buttons

Nov 22 2020

Ich schreibe ein JS-Skript, das in einigen seiner Eigenschaften ein Objekt mit & enthält, z

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

Die Sache ist, wenn ich versuche, über die Werte einer Eigenschaft zu iterieren, z

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

es schlägt fehl, wenn die Eigenschaft "&" hat, es kann t nicht berechnen .

Dies sind die zugehörigen Teile und Funktionen:

Schaltfläche, die beim Klicken ein Dropdown-Menü mit den Hauptthemen anzeigt, das vom Skript mit den Eigenschaften von gefüllt wird topicObj.

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

  </div>
</div>

Hinzufügen eines Themas "newTopic" zum Dropdown-Menü topicsDD; Ich verwende charAt(0)topicDD für die Funktion, setTopicum festzustellen, ob es sich um ein Haupt- oder ein Unterthema handelt

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

Ersetzen Sie die MainTBtn innerHTMLdurch das ausgewählte Thema aus dem DDown, einer der Objekteigenschaften, und setzen Sie das DDown-Menü der Unterthemen zurück / füllen Sie es

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

Löschen Sie die Dropdown-Liste und füllen Sie sie mit den entsprechenden Elementen: den Eigenschaften von topicObj, wenn es sich um das DDown-Menü "Hauptthemen" handelt, oder dem Wert der entsprechenden Eigenschaft, wenn es sich um das Unterthemenmenü handelt. Hier schlägt es fehl, wenn das ausgewählte Hauptthema ein "&" hat. Nach einem anderen Thread wird zu Testzwecken nur noch "Hauptthema -> Unterthema" für alle Unterthemen des ausgewählten Hauptthemas an das Konsolenprotokoll gesendet.

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

Wenn ich mit teste selMTopic = "Client & Peripherals", funktioniert es gut, die Konsole gibt alle Unterthemen aus. Wenn ich benutze selMTopic = document.getElementById("MainTBtn").innerHTML, was ich brauche, bekomme ich in Chrome:

"DropTest MultiDD.htm: 239 Nicht erfasster TypeError: topicObj [selMTopic] kann bei resetTopics nicht iteriert werden (DropTest MultiDD.htm: 239)"

Feuerfuchs:

"Ungefangener TypeError: topicObj [selMTopic] ist eine undefinierte resetTopics-Datei: ///.../DropTest MultiDD.htm: 239"

Linie 239 ist for (let t of topicObj[selMTopic])infunction resetTopics(topicsDD)

Irgendeine Idee, warum die Eigenschaftsiteration des Objekts die Schaltflächen nicht akzeptiert, innerHTMLwenn sie ein "&" hat?

Antworten

rajeshpillai Nov 22 2020 at 17:18

Sie verwenden die for of-Schleife.

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