body
{
background-image: url("background-test.gif");
}
h1
{
font-size: 70px;
font-family: geneva;
color: black;
text-shadow: 3px 3px 2px red;
text-align: center;
text-decoration: underline;
}
h2
{
font-size: 50px;
font-family: geneva;
color: black;
text-shadow: 3px 3px 2px red;
text-align: center;
}
a
{
text-decoration: none;
}
a h3
{
font-family: geneva;
font-size: 35px;
border-radius: 2px;
border-color: black;
color: black;
background-color: gray;
width: 120px;
text-align: center;
position: absolute;
top: 400px;
right: 650px;
}
#computer
{
position: absolute;
bottom: 200px;
right: 100px;
}
#user
{
position: absolute;
bottom: 200px;
left: 100px;
}
#versus
{
position: absolute;
bottom: 280px;
left: 600px;
color: black;
text-shadow: 2px 2px 3px gray;
font-size: 120px;
}
#msg
{
position: absolute;
top: 400px;
left: 100px;
}
#stone
{
position: absolute;
top: 550px;
left: 200px;
}
#paper
{
position: absolute;
top: 550px;
left: 300px;
}
#scissors
{
position: absolute;
top: 550px;
left: 400px;
}
我正在尝试通过单击图像stone.png来更改图像user.png,单击该图像会调用函数change(),但该函数未替换图像,但是我检查了该函数是否被调用我发现它正在被调用,只是没有替换图像。
function change()
{
if(document.getElementbyId('stone').clicked == true)
{
document.getElementbyId('user').src="stone2.jpg"
}
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<img id="computer" src="computer.jpg" width="400" height="400">
<h1 id="versus"> Vs </h1>
<img id="user" src="user.png" width="400" height="400">
<h2 id="msg"> Choose your option !! </h2>
<a href="" onClick="change()"> <img id="stone" src="stone.png" width="70" height="70"></a>
<a href="" onClick="change()"> <img id="paper" src="paper.jpg" width="70" height="70"></a>
<a href="" onClick="change()"> <img id="scissors" src="scissors.jpg" width="70" height="70"></a>
<script type="text/javascript" src="jscode.js"> </script>
</body>
</html>