So in this following code I tried to clear the after I added some Text (in this case they represent ingredients for a shopping list) to the div. Im fairly new to Javascript and dont have that much expirience yet so any help would be much appreciated!
<!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>Document</title>
</head>
<body>
<button id="apple" onclick="apple()">Apple</button>
<button id="tomato" onclick="tomato()">Tomato</button>
<button id="eggs" onclick="eggs()">Eggs</button>
<button id="clear" onclick="clear()">Clear</button>
<div id="cart"></div>
<script>
const cart = document.getElementById('cart');
function apple(){
let div = document.createElement('div');
let foodItem = document.getElementById('apple');
div.textContent = 'Apple';
cart.appendChild(div);
}
function tomato(){
let divTwo = document.createElement('div');
let foodItem = document.getElementById('tomato');
divTwo.textContent = 'Tomatos';
cart.appendChild(divTwo);
}
function eggs(){
let divThree = document.createElement('div');
let foodItem = document.getElementById('eggs');
divThree.textContent = 'Eggs';
cart.appendChild(divThree);
}
function clear(){
document.getElementById('cart').innerHTML = '';
}
</script>
</body>
</html>
