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

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

Answer 1

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

Answer 2

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>

Answer 3

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>