I am trying to create some javascript that will allow users to remove an image they uploaded. I have been trying different suggestions and methods and none have seemed to work. Here is my code.
<!DOCTYPE html>
<html>
<head>
<title>Creating NFT</title>
<style>
body {
background-color: seashell;
color: palegoldenrod;
font-family: Georgia, "Times New Roman", Times, serif;
overflow-x: hidden;
height: 100vh;
width: 100%;
}
.TopNav {
overflow: hidden;
background-color: seashell;
}
.TopNav .Horizons {
position: relative;
font-size: 60px;
font-family: Georgia, "Times New Roman", Times, serif;
float: left;
top: 0px;
font-weight: bold;
color: palegoldenrod;
}
.Horizons:hover {
color: grey;
}
.MintingIntro {
position: relative;
right: -100px;
font-size: 25px;
text-align: center;
}
.NftCard {
border: 4px solid palegoldenrod;
height: 600px;
width: 500px;
position: relative;
bottom: 40px;
background-color: snow;
object-fit: contain;
}
.NftUpload {
height: 100%;
width: 100%;
object-fit: cover;
}
.Upload {
text-align: center;
position: relative;
top: 50%;
left: 32%;
display: none;
}
.Upload:hover {
color: grey;
cursor: pointer;
}
.upload-file {
text-align: center;
position: relative;
top: 5;
left: 33%;
display: block;
border: 1px solid palegoldenrod;
width: 140px;
height: 30px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
font-size: 22px;
border-radius: 10px;
background-color: black;
margin: 5px;
padding: 6px;
cursor: pointer;
}
.upload-file:hover {
color: grey;
}
.Customization {
border: 2px solid floralwhite;
position: relative;
float: right;
height: 520px;
width: 850px;
top: -540px;
text-align: center;
}
.NameCustom {
padding-bottom: 80px;
}
.NameIn {
font-size: 19px;
}
.NameInput {
background-color: snow;
color: black;
border-radius: 0%;
font-size: 17px;
position: relative;
bottom: -30px;
left: -190px;
border: 1px solid black;
}
.SupplyIn {
font-size: 19px;
}
.SupplyInput {
background-color: snow;
color: black;
border-radius: 0%;
font-size: 17px;
bottom: -30px;
position: relative;
left: -140px;
border: 1px solid black;
}
.SupplyCustom {
padding-bottom: 80px;
}
.DescriptionIn {
font-size: 19px;
position: relative;
top: -90px;
z-index: 5;
right: -195px;
}
.DescriptionInput {
background-color: snow;
color: black;
border-radius: 0%;
font-size: 17px;
bottom: -30px;
left: -158px;
position: relative;
width: 600px;
height: 200px;
border: 1px solid black;
}
.TraitsIn {
font-size: 19px;
position: relative;
top: 20px;
z-index: 5;
right: -195px;
}
.close {
z-index: 5;
font-size: 30px;
color: black;
background-color: transparent;
border: 1px solid snow;
position: absolute;
right: 1px;
top: 1px;
cursor: pointer;
}
.close:hover {
color: grey;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="TopNav">
<a
href="http://127.0.0.1:5500/styles/HorizonsMarketplaceFrontEnd2.html"
target="_self"
class="Horizons"
>H</a
>
<div class="ProfilePort">
<i class="fa-solid fa-circle-user fa-2xl" style="color: #f1e598"></i>
</div>
<div class="profilePort"></div>
</div>
<div>
<h1 class="MintingIntro">Create NFT</h1>
</div>
//This is where my button and images are placed. Basically allowing a user to upload an image and then delete it when they want to with the X button in the corner.
<div class="NftCard">
<button class="close" onclick="closeButton">×</button>
<img src="images/nft.png" id="Nft-Image" class="NftUpload" />
<label class="upload-file" for="input-file">Update File</label>
<input
class="Upload"
type="file"
accept="img/jpeg, img/png, img/jpg"
id="input-file"
/>
</div>
<div class="Customization">
<div class="NameCustom">
<label for="Name" class="NameIn">Name of your NFT</label>
<input type="text" class="NameInput" name="Name" />
</div>
<div class="SupplyCustom">
<label for="Supply" class="SupplyIn">Supply</label>
<input type="text" class="SupplyInput" supply="Supply" />
</div>
<div class="DescriptionCustom">
<label for="Description" class="DescriptionIn">Description</label>
<input type="text" class="DescriptionInput" description="Description" />
</div>
<div class="Traits">
<label for="Traits" class="TraitsIn">NFT Traits</label>
<i class="fa-solid fa-plus fa-2xl"></i>
</div>
</div>
<script>
let nftImage = document.getElementById("Nft-Image");
let inputFile = document.getElementById("input-file");
inputFile.onchange = function () {
nftImage.src = URL.createObjectURL(inputFile.files[0]);
};
</script>
</body>
</html>
I am new to Java so I am trying to figure this all out. I believe I have to add an event listener with the event method click?
I have tried multiple fucntions, addEventListeners, etc and nothing has worked. I am new to javascript so I am probably messing up syntax and such.