How to create a button to clear information?

Question

I'm working on a JS project that creates 3 cars with 2 buttons underneath each car. One button shows the car information, the other is supposed to clear the information. I cannot seem to get the clear button to work. I've tried all kinds of things and I have a feeling it's something simple. Please help, here's my code:

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

First things first: refactor your code. Copy/pasting makes it hard to edit (you have to go through every copied snippet). Write your function once, and give it parameters so you can display different things with the same function — blex, Jan 07 '21 at 23:02
I only see one `clear()` method. The other clear methods are undefined. I agree entirely with blex, but just pointing it out. If you don't make the methods, of course it will not work. — Taplar, Jan 07 '21 at 23:02
Because I'm trying to learn. I don't really understand what you're trying to say. The button to display the car information works when I click it, but I can't figure out how to code the clear button to remove information. — KevMcCall, Jan 07 '21 at 23:06
`.reset()` only works on forms. You're overwriting your button's `.innerHTML`, which I don't recommend... but `function clear(){ place document.getElementById('submit1').innerHTML = 'See Details'; }` would put one of them back. Only one unique HTML id attribute value is allowed per window, by the way. — StackSlave, Jan 07 '21 at 23:11
When testing, I found that `clear()` actually cleared the console, and the clear function was basically being overwritten by the built in function. https://stackoverflow.com/questions/65621147/how-to-create-a-button-to-clear-information/65621274#65621274. Also, there were problems with the `.reset()` and the element selection. — Endothermic_Dragon, Jan 08 '21 at 00:02

score 0 · Answer 1 · answered Jan 07 '21 at 23:12

0

It looks like you're attempting to use the HTMLFormElement reset method to revert the contents of the row, but that will not work because the element you are passing is a not an HTMLFormElement.

While not recommended, you can "reset" the contents of your button the same way you set them:

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

answered Jan 07 '21 at 23:12

D M

5,769
4
12
27

If this method is not recommended, then what would be the proper way to do this? I've tried googling and all I can seem to find is how to reset a form. – KevMcCall Jan 07 '21 at 23:18
There's more information in this [question](https://stackoverflow.com/questions/47945659/using-innerhtml-and-what-are-security-concerns) about why directly overriding the `innerHTML` of an element can be a security risk and a headache to maintain. As far as recommendations, you could try having the details on the page already in an element with the `display: none;` attribute set (either inline or in an applied class), then showing/hiding the details element by removing/adding the attribute/class. There's an example [here](https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp). – D M Jan 08 '21 at 14:53

Endothermic_Dragon · Answer 2 · 2021-01-08T00:03:27.140

First off, reset won't work in this case. Secondly, you are not selecting the element itself.

Also, when testing, I realized that onclick="clear()" doesn't fire the function, because it is a built-in function that is used to clear the console.

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>

blex · Answer 3 · 2021-01-07T23:37:07.960

By "refactoring" your code, I mean rewrite it without repeating it in multiple places (Think DRY - Don't Repeat Yourself).

In this example, I removed the onclick attributes in the HTML, used classes instead of IDs, and used a data-car attribute that is used in the JS:

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>

I understand what you're saying now and it makes total sense. This is just the way we are being taught and I really wasn't aware of that. I apologize. — KevMcCall, Jan 07 '21 at 23:24
You don't have to apologize, it was not a reproach, but more of a tip. As you get to write more and more code, you will enjoy only writing it once and not having to go through `func1`, `func2`, etc. when you want to fix it/change it — blex, Jan 07 '21 at 23:26

How to create a button to clear information?

3 Answers3