使用相同的按钮从JSON获取和删除innerHTML

如何解决使用相同的按钮从JSON获取和删除innerHTML

我有一个如下所示的外部JSON文件：

[
  {
    "id": "1","label": "2017-03-30","value": "1675000","accessories": "true"
  },{
    "id": "2","label": "2017-04-01","value": "1440000",{
    "id": "3","label": "2017-04-02","value": "830000","accessories": "false"
  }
]

我可以使用以下按钮获取JSON，它显示在附件的div ID中：

<button id="button2">Get Customers</button>

<h1>Brands that sell Accessories:</h1>
    <div id="accessories"></div>

我正在使用的JavaScript是：

document.getElementById('button2').addEventListener
('click',loadData);

function loadData(e) {
  const xhr = new XMLHttpRequest();

  xhr.open('GET','data.json',true);

  xhr.onload = function() {
    if(this.status === 200) {
      // console.log(this.responseText);

      const customers = JSON.parse(this.responseText);

      let output = '';

      customers.forEach(function(customer) {
       output += `
        <ul>
          <li>Company ID: ${customer.id}</li>
          <li>Company label: ${customer.label}</li>
          <li>Company value: ${customer.value}</li>
          <li>Company Accessories: ${customer.accessories}</li>
        </ul>
        `;
      })
        document.getElementById('accessories').innerHTML = output;
    }
  }
  xhr.send();
};

这会以项目符号点输出公司信息。 我接下来要做的是通过按相同的按钮来删除HTML，但是我正努力将其删除。

我尝试过：

function removeAcc() {
  document.getElementById('accessories').innerHTML = '';
}

但是它只是闪回到相同的列表。 帮助将不胜感激。

解决方法

您需要将程序的当前状态保存在某个地方，以便知道“外部JSON”是否已加载。这样，您可以像这样在eventListener中切换动作：

document.getElementById('button2').addEventListener('click',toggleData);

function toggleData(e) {
  if(hasData) {
    removeAcc()
    hasData = false;
  } else {
    loadData(e)
    hasData = true;
  }
 }