javascript - 使用JS更改div背景图片的URL，但它链接到CSS样式表而不是图片

Question

我正在尝试使用 JavaScript 将 div 的背景图像属性更改为不同的 URL，编写一个函数来执行此操作并使用 onHover 事件调用该函数。然而，它并没有按照我希望的方式运行，并且检查 Firefox 开发人员工具显示该 URL 实际上是我正在使用的样式表。关于可能导致此问题的任何想法？

HTML

这是我调用该函数的地方。

<img class = "preview" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt = "Young Puppy" onmouseover = "upDate(this)" onmouseout = "unDo()">

这是我要编辑的 div。

<div id = "image">
    Hover over an image below to display here.
</div>

Javascript

function upDate(previewPic){
    document.getElementById(image).style.backgroundImage = "url('" + previewPic.src + "')";
}

Answer 1

我认为您忘记了 getElementById 上的 '

function upDate(previewPic){
    document.getElementById('image').style.backgroundImage = "url('" + previewPic.src + "')";
}

您的拼写错误并非无效，但它会查找您的 image 变量的内容。喜欢:

function upDate(previewPic){
    // Identical result using a variable
    let image_id = 'image'; 
    document.getElementById(image_id).style.backgroundImage = "url('" + previewPic.src + "')";
}