I am currently making the front end of my NFT Marketplace and I am creating the functionality for my minting page. I created an update file element that allows users to upload an image into the box container and added a close button just in case they change their mind and want to upload another image. The function does remove the image, however, it removes the element as a whole and now no image can be uploaded period. I do not know what is going on with my code and it's probably something super simple, but I have not been able to find a solution yet. Here is my code. I know CSS, Javascript, and HTML are supposed to be in different files but I put them together for now because there is not too much code. Also, stack overflow is not letting me run a snippet I do not know what's going on. Thank you!
<!DOCTYPE html>
<html>
<head>
<title>Creating NFT</title>
<style>
body {
background-image:url("");
background-repeat:no-repeat;
color: black;
font-family: Georgia, "Times New Roman", Times, serif;
}
.Horizons {
position: relative;
font-size: 8vw;
font-family: Georgia, "Times New Roman", Times, serif;
float: left;
top: 0%;
font-weight: bold;
color: black;
text-decoration: none;
background-color:#f0e1e4;
border-radius: 3%;
}
.Horizons:hover {
color: salmon;
}
.MintingIntro {
position: relative;
font-size: 1.563rem;
text-align: center;
}
.NftCard {
border: 0.25rem solid black;
height: 30rem;
width: 25rem;
background-color: white;
object-fit: contain;
top: 23%;
position: absolute;
}
@media (max-width:920px){
.NftCard{
width: 20rem;
}
.Customization{
left:0%;
top:0%;
}
.DescriptionInput{
width: 15rem;
}
}
.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: fixed;
bottom: 0;
left: 8%;
display: block;
border:transparent;
width: 8.75rem;
height: 1.875rem;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
font-size: 1.375rem;
border-radius: 0.625rem;
background-color: lightskyblue;
margin: 0.313rem;
padding: 0.375rem;
cursor: pointer;
color:white;
}
.upload-file:hover {
background-color:green;
}
.Customization {
position: absolute;
height: fit-content;
width: fit-content;
text-align: center;
right: 20%;
top:20%;
}
.NameCustom {
padding-bottom: 5rem;
}
.NameIn {
font-size: 1.88rem;
}
.NameInput {
background-color: white;
color: black;
border-radius: 0%;
font-size: 1.188rem;
position: relative;
bottom: 0%;
left: 0%;
border: 0.13rem solid black;
}
.SupplyIn {
font-size: 1.88rem;
}
.SupplyInput {
background-color: white;
color: black;
border-radius: 0%;
font-size: 1.188rem;
bottom: 0%;
position: relative;
left: 0%;
border: 0.13rem solid black;
}
.SupplyCustom {
padding-bottom: 5rem;
}
.DescriptionIn {
font-size: 1.88rem;
position: relative;
top: 0%;
z-index: 5;
right: 0%;
}
.DescriptionInput {
background-color: white;
color: black;
border-radius: 0%;
font-size: 1.063rem;
bottom: 0%;
left: 0%;
position: relative;
width: 25rem;
height: 6.25rem;
border: 0.13rem solid black;
}
.close {
z-index: 5;
font-size: 1.875rem;
color: black;
background-color: transparent;
border: 0.063rem solid transparent;
position: absolute;
right: 0.063rem;
top: 0.063rem;
cursor: pointer;
}
.close:hover {
color: salmon;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="background">
<a
href="http://127.0.0.1:5500/styles/HorizonsFrontEndTest2.html"
target="_self"
class="Horizons"
>H</a>
<div class="NftCard">
<button class="close" id="closeBtn" onclick="closeButton()">
×
</button>
<img src="" 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>
<h1 class="MintingIntro">CREATE NFT</h1>
</div>
<div class="NameCustom">
<label for="Name" class="NameIn" id="Name">Name of your NFT</label>
<input type="text" class="NameInput" name="Name" />
</div>
<div class="SupplyCustom">
<label for="Supply" class="SupplyIn" id="Supply">Supply</label>
<input type="text" class="SupplyInput" supply="Supply" />
</div>
<div class="DescriptionCustom">
<label for="Description" class="DescriptionIn" id="Description"
>Description</label
>
<input type="text" class="DescriptionInput" description="Description" />
</div>
</div>
<script>
let closeButton = document.querySelector('.close');
let nftImage = document.querySelector('#Nft-Image');
let inputFile = document.querySelector('#input-file');
inputFile.onchange = function (){
nftImage.src = URL.createObjectURL(inputFile.files[0]);
};
closeButton.addEventListener('click', function closeButton(){
nftImage.remove();
});
</script>
</body>
</html>
I attempted to change the variables I was using in my function however nothing worked. I tried refreshing my page and again nothing worked. I do not know why. I tried removeChild, removeAttributes, etc too, and still nothing.
That's exactly what this does:
Elsewhere you are setting a property on the element:
It sounds like you just want to reset that property instead: