앰퍼샌드, 객체 속성 및 버튼의 innerHTML

Nov 22 2020

일부 속성에 &가있는 객체가있는 JS 스크립트를 작성하고 있습니다.

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

문제는 속성 값을 반복하려고 할 때입니다.

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

속성에 "&"가 있으면 실패하고 t를 계산할 수 없습니다 .

다음은 관련 부품 및 기능입니다.

클릭하면 기본 주제가있는 드롭 다운 메뉴를 표시하는 버튼으로, 속성이있는 스크립트로 채워집니다 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; 나는 그것이 메인 토픽인지 서브 토픽인지를 식별하기 위해 charAt(0)함수에 토픽 DD를 사용합니다.setTopic

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

MainTBtn을 innerHTML개체의 속성 중 하나 인 DDown에서 선택한 항목으로 교체하고 하위 항목 DDown 메뉴를 재설정 / 채우기

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

드롭 다운 목록을 지우고 해당 항목으로 채 웁니다. "주 주제"DDown 메뉴 인 경우 topicObj의 속성 또는 하위 항목 메뉴 인 경우 해당 속성의 값. 선택한 주요 주제에 "&"가있는 경우 실패합니다. 다른 스레드를 따라 테스트 목적으로 이제 선택한 메인의 모든 하위 주제에 대한 "주 주제-> 하위 주제"를 콘솔 로그에 보냅니다.

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 & Peripherals"제대로 작동하고 콘솔은 모든 하위 주제를 출력합니다. selMTopic = document.getElementById("MainTBtn").innerHTML내가 필요한을 사용할 때 Chrome에 들어갑니다.

"DropTest MultiDD.htm : 239 Uncaught TypeError : topicObj [selMTopic]은 resetTopics에서 반복 할 수 없습니다 (DropTest MultiDD.htm : 239)"

Firefox :

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

라인 239은 for (let t of topicObj[selMTopic])function resetTopics(topicsDD)

객체의 속성 반복이 innerHTML"&"가있을 때 버튼을 받아들이지 않는 이유를 아십니까?

답변

rajeshpillai Nov 22 2020 at 17:18

for 루프를 사용하고 있습니다.

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