我目前正在为我的 NFT 市场制作前端，并为我的铸币页面创建功能。我创建了一个更新文件元素，允许用户将图像上传到盒子容器中，并添加了一个关闭按钮，以防万一他们改变主意并想要上传另一个图像。该函数实际上确实删除了图像，但是它删除了整个元素，现在无法上传图像。我真的不知道我的代码发生了什么，它可能非常简单，但我还没有找到解决方案。这是我的代码。我知道 css、javascript 和 html 应该位于不同的文件中，但我现在将它们放在一起，因为没有太多代码。另外，堆栈溢出不允许我运行一个我不知道发生了什么的代码片段。谢谢！
<!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>
我尝试更改函数中使用的变量，但没有任何效果。我尝试刷新页面，但再次没有任何效果。我真不知道为什么。我也尝试了removeChild、removeAttributes等，但仍然一无所获。
但是它会删除整个元素
这正是它的作用：
nftImage.remove();
在其他地方，您可以在元素上设置属性：
nftImage.src = URL.createObjectURL(inputFile.files[0]);
听起来您只想重置该属性：
nftImage.src = "";