使用單選按鈕來更改Div的背景圖像

我正嘗試使用表單中的單選按鈕來更改div的背景圖像，但它根本無法正常工作，但我嘗試了許多方法。我確信在我的代碼中這很簡單，但我只是盯着它太久了。使用單選按鈕來更改Div的背景圖像

我已經包含了我的HTML，Javascript和CSS，所以如果任何人都可以通過看看會膨脹。

HTML和Javascript：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 




<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<link rel="stylesheet" type="text/css" href="styles/styles.css" /> 
<title>Birthday Card Generator</title> 


<script language="javascript"> 

function bgColor(bg) 
{ 
        document.getElementById("ecard").style.backgroundImage = "url(images/" + bg + ".jpg)"; 
} 


</script> 

</head> 

<body> 

    <div id="left"> 



     <div id="background"> 
     <form> 
     <input type="radio" id="bg1" name="bg" value="bg1" onChange="bgColor(this.value)">Background 1 
     <br /><br /> 
     <input type="radio" id="bg2" name="bg" value="bg2" onChange="bgColor(this.value)">Background 2 
     </form> 
     </div> 
    </form> 
    </div> 

    <div id="right"> 

    <div id="ecard"> 

    </div> 

    </div> 

</body> 
</html>

CSS

@charset "utf-8"; 
/* CSS Document */ 

#left 
{ 
    float: left; 
    width: 50%; 
    height: 100%; 
    overflow: scroll; 
    overflow-x:hidden; 
} 

#right 
{ 
    float: right; 
    width: 50%; 
    height: 100%; 
    overflow: scroll; 
} 

#background 
{ 
    float: left; 
    width: 100%; 
    height: 100px; 
    overflow: scroll; 
    overflow-y:hidden; 
} 

#ecard 
{ 
    width:400px; 
    height:300px; 
    margin:0px auto; 
}

來源

2013-11-21 GreenEggs_

你確定你的IMG SRC工作？ –

圖片src正在工作，是的。 –

我把它改變你的函數的名稱changeBackground和清理你的HTML一點的工作：

<input type="radio" id="bg1" name="bg" value="bg1" onClick="changeBackground(this.value);" />Background 1

JS：

function changeBackground(bg) { 
    document.getElementById("ecard").style.backgroundImage = "url(images/" + bg + ".jpg)"; 
}

函數名稱更改的原因是bgColor是全局屬性，因此將其作爲函數調用導致類型錯誤。

演示：http://jsfiddle.net/verashn/F6zPc/

來源

2013-11-21 00:44:56 VLS

你是一個美妙的代碼魔術師。 –

使用單選按鈕來更改Div的背景圖像

回答

相關問題