为什么此javascript复选框始终保持未选中状态？

debugcn 发表于 Dev

哈尔登

我对以下js有问题。听起来很傻，但是以下js一直未选中第2个复选框（位于<div id="shortcut1"></div>和中<div id="shortcut2"></div>）。我使用其他选项测试了脚本，更改了中的参数cmdInfo。我的结论是，无论脚本是什么，都永远不会在末尾选中2 first复选框。

您对这个问题有任何想法吗？我花了几个小时，但我不知道。非常感谢你的帮助！

https://jsfiddle.net/bqaude3h/2/

const URL_PLACEHOLDER = 'your url'

let commands = [
    { name: "shortcut1", description: null, shortcut: "Alt+W" },
    { name: "shortcut2", description: null, shortcut: "Alt+Q" },
    { name: "shortcut3", description: null, shortcut: "Alt+S" }
]
let cmdInfo = {
    "shortcut1": {
        "storeSearchHistory": true,
        "url": "https://test.com",
        "history": ['test']
    },
    "shortcut2": {
        "storeSearchHistory": false,
        "url": ""
    },
    "shortcut3": {
        "storeSearchHistory": true,
        "url": ""
    }
}

let html, div, existingHistory;
commands.forEach(cmd => {

    html = `
    <div id="${cmd.name}" class="sc-div">
        <div class="flex-container">
            <input type="text" class="shortcut" value="${cmd.shortcut}" />
            <input type="url" class="url" placeholder="${URL_PLACEHOLDER}"
                    value="${cmdInfo[cmd.name].url}" />
        </div>
        <div class="history-div">
            <button>View search history</button>
            <input type="checkbox" class="store-search-history" />
            <label><small>Save search history</small></label>
        </div>
    </div>
    `
    document.querySelector('#shortcuts').innerHTML += html;

    try {
        existingHistory = Boolean(cmdInfo[cmd.name].history.length)
    } catch {
        existingHistory = false;
    }

    div = document.getElementById(cmd.name);
    div.querySelector('button').disabled = !existingHistory;

    div.querySelector('.store-search-history').checked = cmdInfo[cmd.name].storeSearchHistory;
});

卡利玛

问题在于此行： document.querySelector('#shortcuts').innerHTML += html;

您可以阅读有关“ element.innerHTML + =”为什么是错误代码的信息？。基本上，浏览器将多次重新解析构造的DOM，这可能会导致引用中断。

这是一个工作示例：

let commands = [{
    name: "shortcut1",
    description: null,
    shortcut: "Alt+W"
  },
  {
    name: "shortcut2",
    description: null,
    shortcut: "Alt+Q"
  },
  {
    name: "shortcut3",
    description: null,
    shortcut: "Alt+S"
  }
]
let cmdInfo = {
  "shortcut1": {
    "storeSearchHistory": true,
    "url": "https://some_url.com"
  },
  "shortcut2": {
    "storeSearchHistory": false,
    "url": ""
  },
  "shortcut3": {
    "storeSearchHistory": true,
    "url": ""
  }
}

let html, div, existingHistory, URL_PLACEHOLDER;
commands.forEach(cmd => {

  html = `
    <div id="${cmd.name}" class="sc-div">
        <div class="flex-container">
            <input type="text" class="shortcut" value="${cmd.shortcut}" />
            <input type="url" class="url" placeholder="${URL_PLACEHOLDER}"
                    value="${cmdInfo[cmd.name].url}" />
        </div>
        <div class="history-div">
            <button>
                <img src="icons/box-open-solid.svg"> View search history
            </button>
            <input type="checkbox" class="store-search-history" />
            <label><small>Save search history</small></label>
        </div>
    </div>
    `
  //document.querySelector('#shortcuts').innerHTML += html;
  document.querySelector('#shortcuts').insertAdjacentHTML('beforeend', html);

  try {
    existingHistory = Boolean(cmdInfo[cmd.name].history.length)
  } catch (e) {
    existingHistory = false;
  }

  div = document.getElementById(cmd.name);
  div.querySelector('button').disabled = !existingHistory;
  div.querySelector('.store-search-history').checked = cmdInfo[cmd.name].storeSearchHistory;
});