Javascript 使用单选按钮更改Div的背景图像_Javascript_Html_Css_Forms_Background Image

Javascript 使用单选按钮更改Div的背景图像

javascript html css forms

Javascript 使用单选按钮更改Div的背景图像,javascript,html,css,forms,background-image,Javascript,Html,Css,Forms,Background Image,我试图使用表单中的单选按钮来更改div的背景图像，但无论我尝试了多少种方法，它都不起作用。我确信这在我的代码中很简单，但我只是盯着它看了太久我已经包括了我的HTML、Javascript和CSS，所以如果有人能看一下，那就太棒了 HTML和Javascript： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio

我试图使用表单中的单选按钮来更改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>

我通过将函数名更改为

changeBackground

并稍微清理HTML来实现它：

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

函数名更改的原因是

bgColor

是一个全局属性，因此将其作为函数调用会导致类型错误

演示：

您确定您的img src正常工作吗？图像src正常工作，是的。

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

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