アンパサンド、オブジェクトプロパティ、およびボタンの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)関数setTopicにtopicsDDを使用して、それがメイントピックかサブトピックかを識別します

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

MainTBtninnerHTMLを、オブジェクトのプロパティの1つである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] is not iterable at resetTopics（DropTest MultiDD.htm：239）"

Firefox：

「キャッチされていないTypeError：topicObj [selMTopic]は未定義のresetTopicsfile：///.../DropTest MultiDD.htm：239です」

ライン239は、for (let t of topicObj[selMTopic])中function resetTopics(topicsDD)

オブジェクトのプロパティの反復がinnerHTML「＆」を持っているときにボタンを受け入れない理由はありますか？

アンパサンド、オブジェクトプロパティ、およびボタンのinnerHTML

回答