如何创建一个按钮来清除信息？答案

【问题标题】：How to create a button to clear information?如何创建一个按钮来清除信息？
【发布时间】：2021-01-07 23:00:00
【问题描述】：

我正在开发一个 JS 项目，该项目创建 3 辆汽车，每辆汽车下方有 2 个按钮。一键显示汽车信息，一键清除信息。我似乎无法让清除按钮工作。我尝试了各种各样的事情，我觉得这很简单。请帮忙，这是我的代码：

<div id= "container">
<div class="row">
    <div class="column">
        <img src="images/Porsche.jpg">
        <button onclick="display1()" id="submit1">See Details</button>

        <button onclick="clear()" value="reset" id="clear">Clear Selection</button>
        
    </div>
    <div class="column">
        <img src="images/Ferrari.jpg">
        <button onclick="display2()" id="submit2">See Details</button>

        <button onclick="clear2()" id="clear">Clear Selection</button>
    </div>
    <div class="column">
        <img src="images/Lambo.jpg">
        <button onclick="display3()" id="submit3">See Details</button>
        
        <button onclick="clear3()" id="clear">Clear Selection</button>
    </div>
  </div>
</div>


var porsche = {
    make: "Porsche",
    model: "Panarama",
    year: 2020,
    available: true,
    description: "The Porsche Panamera is an excellent super luxury car."
}

function display1() {
    var place = document.getElementById("submit1");

    for (value in porsche) {
        place.innerHTML = "Make: " + porsche.make + "<br>" +
            "Model: " + porsche.model + "<br>" +
            "Year: " + porsche.year + "<br>" +
            "Available: " + porsche.available + "<br>" +
            "About: " + porsche.description;
    }
};

var ferrari = {
    make: "Ferrari",
    model: "Panarama",
    year: 2020,
    available: true,
    description: "Ranks near the top of super luxury cars, with a strong engine, well-balanced handling, and comfortable interior."
}

function display2() {
    var place = document.getElementById("submit2");

    for (value in ferrari) {
        place.innerHTML = "Make: " + ferrari.make + "<br>" +
            "Model: " + ferrari.model + "<br>" +
            "Year: " + ferrari.year + "<br>" +
            "Available: " + ferrari.available + "<br>" +
            "About: " + ferrari.description;
    }
};

var lambo = {
    make: "Lamborghini",
    model: "Huracan",
    year: 2021,
    available: true,
    description: "Exceptionally comfortable ride and stunning performance."
}

function display3() {
    var place = document.getElementById("submit3");

    for (value in lambo) {
        place.innerHTML = "Make: " + lambo.make + "<br>" +
            "Model: " + lambo.model + "<br>" +
            "Year: " + lambo.year + "<br>" +
            "Available: " + lambo.available + "<br>" +
            "About: " + lambo.description;
    }
};

function clear() {
    document.getElementById(".row").reset();
}

【问题讨论】：

第一件事：重构你的代码。复制/粘贴使编辑变得困难（您必须检查每个复制的 sn-p）。编写一次你的函数，并给它参数，这样你就可以用同一个函数显示不同的东西
我只看到一个clear() 方法。其他 clear 方法未定义。我完全同意 blex，但只是指出来。不做方法当然不行。
因为我正在努力学习。我真的不明白你想说什么。显示汽车信息的按钮在我单击时有效，但我不知道如何编写清除按钮以删除信息。
重构我的代码是什么意思？
.reset() 仅适用于表单。您正在覆盖按钮的.innerHTML，我不建议这样做......但function clear(){ place document.getElementById('submit1').innerHTML = 'See Details'; } 会将其中一个放回去。顺便说一下，每个窗口只允许一个唯一的 HTML id 属性值。

标签： javascript html arrays visual-studio

【解决方案1】：

您似乎正在尝试使用 HTMLFormElement reset 方法来还原行的内容，但这不起作用，因为您传递的元素不是 HTMLFormElement。

虽然不推荐，但您可以像设置按钮一样“重置”按钮的内容：

<button id="submit1" onclick="display1()">See Details</button>
<button onclick="clear1()">Clear</button>

function display1() {
    let place = document.getElementById("submit1");
    place.innerHTML = "Make: " + ...;
}

function clear1() {
    let place = document.getElementById("submit1");
    place.innerHTML = "See Details";
}

【讨论】：

如果不推荐这种方法，那么正确的方法是什么？我试过谷歌搜索，我似乎只能找到如何重置表单。
在这个question 中有更多信息，说明为什么直接覆盖元素的innerHTML 可能会带来安全风险，并且难以维护。至于建议，您可以尝试将页面上的详细信息已经在具有display: none; 属性集的元素中（内联或在应用类中），然后通过删除/添加属性/类来显示/隐藏详细信息元素.有一个例子here。

【解决方案2】：

“重构”你的代码，我的意思是重写它而不在多个地方重复它（想想 DRY - 不要重复自己 )。

在此示例中，我删除了 HTML 中的 onclick 属性，使用类而不是 ID，并使用了 JS 中使用的 data-car 属性：

var cars = {
  porsche: {
    make: "Porsche",
    model: "Panarama",
    year: 2020,
    available: true,
    description: "The Porsche Panamera is an excellent super luxury car."
  },
  ferrari: {
    make: "Ferrari",
    model: "Panarama",
    year: 2020,
    available: true,
    description: "Ranks near the top of super luxury cars, with a strong engine, well-balanced handling, and comfortable interior."
  },
  lambo: {
    make: "Lamborghini",
    model: "Huracan",
    year: 2021,
    available: true,
    description: "Exceptionally comfortable ride and stunning performance."
  }
};

// You can add the event listener once here (no `onclick` in the HTML)
document.getElementById('container').addEventListener('click', function(e) {
  if      (e.target.classList.contains('details-btn')) displayCarInfo(e.target);
  else if (e.target.classList.contains('clear-btn'))   clear(e.target);
});

function displayCarInfo(el) {
  // You can use a `data-car` attribute, declared in the HTML
  var carId = el.closest('[data-car]').getAttribute('data-car'),
      car   = cars[carId];

  el.innerHTML = "Make: "      + car.make      + "<br>" +
                 "Model: "     + car.model     + "<br>" +
                 "Year: "      + car.year      + "<br>" +
                 "Available: " + car.available + "<br>" +
                 "About: "     + car.description;
};

function clear(el) {
  var place = el.closest('[data-car]').querySelector('.details-btn');
  place.innerHTML = 'See details';
}

<div id="container">
  <div class="row">
    <div class="column" data-car="porsche">
      <img src="images/Porsche.jpg">
      <button class="details-btn">See Details</button>
      <button class="clear-btn">Clear Selection</button>
    </div>
    <div class="column" data-car="lambo">
      <img src="images/Lambo.jpg">
      <button class="details-btn">See Details</button>
      <button class="clear-btn">Clear Selection</button>
    </div>
    <div class="column" data-car="ferrari">
      <img src="images/Ferrari.jpg">
      <button class="details-btn">See Details</button>
      <button class="clear-btn">Clear Selection</button>
    </div>
  </div>
</div>

【讨论】：

我明白你现在在说什么，这完全有道理。这就是我们被教导的方式，我真的没有意识到这一点。我很抱歉。
您不必道歉，这不是责备，而是提示。随着您编写越来越多的代码，您将享受只编写一次而无需通过func1、func2 等来修复/更改它

【解决方案3】：

首先，在这种情况下重置将不起作用。其次，您没有选择元素本身。

另外，在测试的时候，我发现onclick="clear()" 并没有触发这个函数，因为它是一个用于清除控制台的内置函数。

var porsche = {
  make: "Porsche",
  model: "Panarama",
  year: 2020,
  available: true,
  description: "The Porsche Panamera is an excellent super luxury car."
}

function display1() {
  var place = document.getElementById("submit1");

  for (value in porsche) {
    place.innerHTML = "Make: " + porsche.make + "<br>" +
      "Model: " + porsche.model + "<br>" +
      "Year: " + porsche.year + "<br>" +
      "Available: " + porsche.available + "<br>" +
      "About: " + porsche.description;
  }
};

var ferrari = {
  make: "Ferrari",
  model: "Panarama",
  year: 2020,
  available: true,
  description: "Ranks near the top of super luxury cars, with a strong engine, well-balanced handling, and comfortable interior."
}

function display2() {
  var place = document.getElementById("submit2");

  for (value in ferrari) {
    place.innerHTML = "Make: " + ferrari.make + "<br>" +
      "Model: " + ferrari.model + "<br>" +
      "Year: " + ferrari.year + "<br>" +
      "Available: " + ferrari.available + "<br>" +
      "About: " + ferrari.description;
  }
};

var lambo = {
  make: "Lamborghini",
  model: "Huracan",
  year: 2021,
  available: true,
  description: "Exceptionally comfortable ride and stunning performance."
}

function display3() {
  var place = document.getElementById("submit3");

  for (value in lambo) {
    place.innerHTML = "Make: " + lambo.make + "<br>" +
      "Model: " + lambo.model + "<br>" +
      "Year: " + lambo.year + "<br>" +
      "Available: " + lambo.available + "<br>" +
      "About: " + lambo.description;
  }
};

function clear1() {
  document.getElementById("submit1").innerText="See Details";
}

function clear2() {
  document.getElementById("submit2").innerText="See Details";
}

function clear3() {
  document.getElementById("submit3").innerText="See Details";
}

<div id="container">
  <div class="row">
    <div class="column">
      <img src="images/Porsche.jpg">
      <button onclick="display1()" id="submit1">See Details</button>
      <button onclick="clear1()" id="clear">Clear Selection</button>

    </div>
    <div class="column">
      <img src="images/Ferrari.jpg">
      <button onclick="display2()" id="submit2">See Details</button>

      <button onclick="clear2()" id="clear">Clear Selection</button>
    </div>
    <div class="column">
      <img src="images/Lambo.jpg">
      <button onclick="display3()" id="submit3">See Details</button>

      <button onclick="clear3()" id="clear">Clear Selection</button>
    </div>
  </div>
</div>

【讨论】：