加入&；删除带有普通Javascript的类-未知副作用

我正在尝试添加和删除一个类“on-screen”，到一个图像包装div中，并使用我的“outputImage”函数“output wrap”使图像出现或消失。但是，在添加类之前，当I console.log包含映像的元素（“output wrap”div）时，控制台指示该类已被分配！您可以从我的HTML中看到，“output wrap”div在添加“on-screen”类之前没有任何类。这里发生了什么事

另外，如果图像已经有“on-screen”类，我想删除它。但也出现了类似的现象。我通过classList.remove（）删除了“on-screen”类，但删除之后，“output wrap”div的console.log立即显示该类没有被删除。为什么会这样

函数输出图像（）{
//获取随机图像
//让randomIndex=Math.round（（Math.random（）*（images.length-1）），
//randomImageURL=图像[randomIndex]，
const randomImageURL=”https://picsum.photos/200/300";
image=document.getElementById（“输出包装”），
outputDiv=document.getElementById（“输出”），
输出=``；
//如果图像已经显示
if（image.classList.contains（“屏幕上”））{
//替换图像
image.classList.remove（“屏幕上”）；
console.log（image）//使用“on-screen”类记录图像…它应该被删除！
outputDiv.innerHTML=输出；
//如果没有显示图像
}否则{
outputDiv.innerHTML=输出；
console.log（image）//在添加类之前，使用“屏幕上”类记录图像！
image.classList.add（“屏幕上”）；
}
}
const button=document.querySelector（“按钮”）；
按钮。addEventListener（“单击”，输出图像）
正文{
字体系列：roboto；
背景色：rgb（78,78,78）；
颜色：白色；
}
#输出包装{
位置：绝对位置；
左：-450px；
过渡：所有2；
}
#屏幕上的输出包装{
动画：FadeinEase3s；
顶部：200px；
转换：translateX（1200px）；
}
img{
背景色：rgb（44,44,44）；
宽度：400px；
边界半径：5%；
盒影：10px 10px黑色；
}

终极狗图片查看器
繁殖
--精选品种--
给我看张照片！
你好
您的代码没有问题。在屏幕上添加
后，只需
控制台.log
即可打印出
图像
。当我刚刚发现时，这让我很惊讶。

在这种情况下，执行console.log的正确方法是

console.log(JSON.parse(JSON.stringify(image, ['classList'])));

您的问题陈述非常混乱，您在哪里调用了
outputImage
功能对不起，我尽量讲清楚。outputImage函数是在按钮（id=“btn”）上附加的click event函数中调用的。为简单起见，我用编辑过的代码拍摄了lorem picsum图像