我正在尝试创建一个蘑菇日志，在按下不同的按钮后，容器中会填充一组独特的图像。
点击第一个按钮后出现图像，但再次点击后图像不会消失。我需要更改什么才能使图像在每隔一次点击或其他按钮点击时消失？
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mushroom Log</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Mushroom Log</h1>
<br>
<section id="container"></section>
<h2>Select a Mushroom Type</h2>
<br>
<button type="button" class="button1">Light-Spored Gilled Mushrooms</button>
<button type="button" class="button2">Brown-Spored Gilled Mushrooms</button>
<button type="button" class="button3">Dark-Spored Gilled Mushrooms</button>
<button type="button" class="button4">Polypores and Crust-Fungi</button>
<button type="button" class="button5">Puffballs, Earthballs, and Earthstars</button>
<button type="button" class="button6">Jelly-like Fungi</button>
</body>
<script src="app.js"></script>
</html>
Javascript：
const btn1 = document.querySelector('.button1');
function lightSpored() {
let beenCalled = false;
if (!beenCalled) {
beenCalled = true;
btn1.addEventListener('click', () => { container.append(fungi1) });
} else {
container.innerHTML = ' ';
beenCalled = false;
}
}
lightSpored();