Of ampersands, object properties, and Buttons' innerHTMLs

问题

I'm writing a JS script that has an object with &'s in some of its properties, e.g.

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

The thing is, when I attempt to iterate over the values of a property, e.g.

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

it fails if the property has "&", it can't compute t.

These are the related parts and functions:

Button that, when clicked, displays a dropdown menu with the main topics, which will get populated by the script with the properties of topicObj.

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

  </div>
</div>

Adding a topic "newTopic" to the dropdown menu topicsDD; I use charAt(0) of topicsDD for the function setTopic to identify if it's a main or a sub topic

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

Replacing the MainTBtn's innerHTML with the selected topic from the DDown, one of the object's properties, and reset/populate the sub-topics DDown menu

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

Clear the dropdown list and populate it with the corresponding items: the topicObj's properties if it's the "main topics" DDown menu or the value of the corresponding property if it's the sub-topics menu. This is where it fails, when the selected main topic has an "&". Following another thread, for testing purposes, now it's just sending "main topic -> Sub topic" for all the sub-topics of the selected main to the console log.

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

When I test with selMTopic = "Client & Peripherals", it works fine, the console outputs all its sub-topics. When I use selMTopic = document.getElementById("MainTBtn").innerHTML, which is what I need, I get in Chrome:

"DropTest MultiDD.htm:239 Uncaught TypeError: topicObj[selMTopic] is not iterable at resetTopics (DropTest MultiDD.htm:239)"

Firefox:

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

Line 239 is for (let t of topicObj[selMTopic]) in function resetTopics(topicsDD)

Any idea why the object's property iteration is not accepting the button's innerHTML when it has an "&"?

回答1:

You are using the for of loop.

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

来源：https://stackoverflow.com/questions/64957107/of-ampersands-object-properties-and-buttons-innerhtmls

标签

javascript

html

arrays

object