使用JS更改div背景圖片的URL，但它鏈接到CSS樣式表而不是圖片

Question

我正在嘗試使用JavaScript將div的background-image屬性更改為不同的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 + "')";
}