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";
}
Solution 2 :
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';
}
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();
}
Comments
Comment posted by blex
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
Comment posted by Taplar
I only see one
Comment posted by KevMcCall
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.
Comment posted by KevMcCall
What do you mean by refactor my code?
Comment posted by StackSlave
.reset()
Comment posted by KevMcCall
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.
Comment posted by question
There’s more information in this
Comment posted by KevMcCall
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.
Comment posted by blex
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
