style.opacity 在 ajax 函数中不起作用

Question

我在我的网站上创建了拖放功能。当您将图像放入该区域时，将显示图像预览以及右上角的 X 标记，表示删除图像。但是，当我将图像放在该区域时，X 标记不可见。不透明度没有变为 1。

这是我的代码。代码很长，但我选择了相关部分：-

let deleteImage;

$(document).ready( function () {
    deleteImage = document.getElementById("deleteImage").addEventListener('click', removeImage);
})

function handleDrop(e) {
    let xhr = new XMLHttpRequest(),
        data = new FormData();

    xhr.onreadystatechange = function () {  
        if (this.readyState == 4 && this.status == 200) {
            console.log("Response " + this.responseText);
            imageUrlInput.value = this.responseText;
            previewDropArea.setAttribute("src", this.responseText ); 

            //------------- This code isn't working -----------------------------------
            deleteImage.style.opacity = "1";
        }
    }
}

let removeImage = function (event) {
    previewDropArea.setAttribute("src", "#");
    imageUrlInput.value = "";
    this.style.opacity = "0";
}  

这是我与之关联的 SASS：-

#deleteImage{
        height: 20px;
        width: 20px;
        align-self: flex-start;
        position: relative;
        left: 90px;
        opacity: 0;
    }

Answer 1

您已将 deleteImage 定义为来自 addEventListener 的返回值，因此它不是 HTML 元素。

您需要将deleteImage 定义为getElementById 的返回值。