和号，对象属性和Button的innerHTML [英] Of ampersands, object properties, and Buttons' innerHTMLs

问题描述

我正在编写一个JS脚本，该脚本的某些属性中包含带有&的对象，例如

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

如果该属性具有&"，它将失败，无法计算 t .

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

这些是相关的部分和功能:

These are the related parts and functions:

单击该按钮将显示包含主要主题的下拉菜单，该脚本将由具有 topicObj 属性的脚本填充.

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>

添加主题"newTopic"；到下拉菜单 topicsDD ；我将topicDD的 charAt(0)用于功能 setTopic 的功能，以识别它是主要主题还是子主题

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

用对象的属性之一DDown中的选定主题替换MainTBtn的 innerHTML ，并重置/填充子主题DDown菜单

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

清除下拉列表，并在其中填充相应的项目:topicObj的属性(如果它是主要主题")；DDown菜单或相应属性的值(如果是子主题菜单).当所选的主要主题具有&"时，这就是失败的地方.出于测试目的，紧随另一个线程，现在，它只是发送主要主题->子主题控制台日志中所选主条目的所有子主题.

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

当我使用 selMTopic ="Client&外围设备" ，它工作正常，控制台输出其所有子主题.当我使用所需的 selMTopic = document.getElementById("MainTBtn").innerHTML 时，我进入了Chrome:

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未捕获的TypeError:topicObj [selMTopic]不可迭代在resetTopics(DropTest MultiDD.htm:239)处"

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

Firefox:

"未捕获的TypeError:topicObj [selMTopic]未定义resetTopics file:///.../DropTest MultiDD.htm:239"

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

第239行是的 for(在主题 function resetTopics(topicsDD)

有人知道为什么当对象的属性迭代为&"时，其属性迭代不接受按钮的 innerHTML 吗?

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

推荐答案

您正在使用for循环.

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
}

这篇关于和号，对象属性和Button的innerHTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！