我无法使 onmouseout 功能工作
I cannot make the onmouseout function work
我无法使用 onmouseout 功能,这应该会使 "demo" 段落中的一些文本消失,运行 在我正在开发的这个简单的剪刀石头布游戏中,任何想法为什么它不起作用,我说的功能是在头脚本中,它感兴趣的元素是 "objects" div:
中的元素
这是我的 HTML 代码:
<!DOCTYPE html>
<html>
<head>
<title>ROCK, PAPER OR SCISSORS</title>
<link rel="stylesheet" type="text/css" href="css for rock paper scissors.css"/>
<script>
var userChoice;
function game(){
var computerChoice=Math.random();
if (computerChoice <=0.33){
computerChoice="rock";
}else if (computerChoice<= 0.66){
computerChoice="paper";
}else{
computerChoice="scissors";
}
var winner = function (choice1,choice2){
if(choice1===choice2){
return "It's a tie!";
}else if(choice1==="rock"){
if (choice2==="paper"){
return "Paper wins!";
}else if(choice2==="scissors"){
return "Rock wins!";
}
}else if(choice1==="paper"){
if(choice2==="rock"){
return "Paper wins!";
}else if (choice2==="scissors"){
return "Scissors win!";
}
}else if (choice1==="scissors"){
if (choice2==="rock"){
return "Rock wins!";
}else if(choice2==="paper"){
return "Scissors win!";
}
}
}
document.getElementById("demo").innerHTML="You: "+userChoice+" "+"<br>"+"Computer: "+computerChoice+"<br>"+ winner(userChoice,computerChoice);
};
function clear(){
document.getElementById("demo").innerHTML= " ";
};
function descriptionpaper(){
document.getElementById("demo").innerHTML="<span>Paper</span>: this is the worst enemy of any rock";
};
function descriptionrock(){
document.getElementById("demo").innerHTML="<span>Rock</span>: preatty damn hard, impossible to cut";
};
function descriptionscissors(){
document.getElementById("demo").innerHTML="<span>Scissors</span>: they cut things...that's about it";
};
</script>
</head>
<body>
<div class="wrapper">
<h1>ROCK, PAPER OR SCISSORS . . .<br><span>CHOOSE ONE WISELY . . .<span></h1>
<div class="flame" title="Fire makes this intense...even more than it alredy is"></div>
<div class="flame" title="Fire makes this intense...even more than it alredy is"></div>
<div class="flame" title="Fire makes this intense...even more than it alredy is"></div>
<div id="objects">
<div class="object" id="paper"><a onmouseover="descriptionpaper()" onmouseout="clear()" onclick="userChoice='paper';game()"><img src="http://images.clipartpanda.com/sheet-paper-clipart-free-vector-blank-white-paper-cartoon-clip-art_114492_Blank_White_Paper_Cartoon_clip_art_medium.png"/></a></div>
<div class="object" id="rock"><a onmouseover="descriptionrock()" onmouseout="clear()" onclick="userChoice='rock';game()"><img src="http://pixabay.com/static/uploads/photo/2014/12/22/00/03/rock-576669_640.png"/></a></div>
<div class="object" id="scissors"><a onmouseover="descriptionscissors()" onmouseout="clear()" onclick="userChoice='scissors';game()"><img src="http://www.clipartbest.com/cliparts/dT8/okg/dT8okg6Te.png"/></a></div>
</div>
<p id="demo"></p>
</div>
</body>
</html>
这是我的 CSS:
h1
{
color:black;
text-align:center;
font-family:impact;
}
#demo
{
text-align:center;
color:black;
font-size:30px;
font-family:impact;
margin-top:-82px;
}
span
{
font-size: 60px;
}
.flame
{
height:350px;
display:inline;
content:url("http://vector-magz.com/wp-content/uploads/2013/08/fire-vector.png");
width:30%;
padding-left:15px;
position:relative;
margin-left:15px;
}
img
{
height:150px;
width:250px;
}
#objects
{
position:relative;
margin-top:-180px;
height:300px;
}
.object
{
width:33%;
display:inline;
height:100%;
margin-left:90px;
}
#rock
{
padding:50px;
}
#scissors
{
padding:0px;
}
.wrapper
{
width:1200px;
margin:0 auto;
}
javascript 中有一个 clear
方法,因此您不能将函数命名为它。将您的函数名称更改为任何其他名称,您的问题将得到解决。
https://developer.mozilla.org/en-US/docs/Web/API/Document/clear
我把它移到 jsfiddle 后它工作正常。
http://jsfiddle.net/4s273tek/1/
请记住,通常最好将 javascript/css/html 分开,以免在混乱中翻找错误。话虽如此,它应该有效。
>
我无法使用 onmouseout 功能,这应该会使 "demo" 段落中的一些文本消失,运行 在我正在开发的这个简单的剪刀石头布游戏中,任何想法为什么它不起作用,我说的功能是在头脚本中,它感兴趣的元素是 "objects" div:
中的元素这是我的 HTML 代码:
<!DOCTYPE html>
<html>
<head>
<title>ROCK, PAPER OR SCISSORS</title>
<link rel="stylesheet" type="text/css" href="css for rock paper scissors.css"/>
<script>
var userChoice;
function game(){
var computerChoice=Math.random();
if (computerChoice <=0.33){
computerChoice="rock";
}else if (computerChoice<= 0.66){
computerChoice="paper";
}else{
computerChoice="scissors";
}
var winner = function (choice1,choice2){
if(choice1===choice2){
return "It's a tie!";
}else if(choice1==="rock"){
if (choice2==="paper"){
return "Paper wins!";
}else if(choice2==="scissors"){
return "Rock wins!";
}
}else if(choice1==="paper"){
if(choice2==="rock"){
return "Paper wins!";
}else if (choice2==="scissors"){
return "Scissors win!";
}
}else if (choice1==="scissors"){
if (choice2==="rock"){
return "Rock wins!";
}else if(choice2==="paper"){
return "Scissors win!";
}
}
}
document.getElementById("demo").innerHTML="You: "+userChoice+" "+"<br>"+"Computer: "+computerChoice+"<br>"+ winner(userChoice,computerChoice);
};
function clear(){
document.getElementById("demo").innerHTML= " ";
};
function descriptionpaper(){
document.getElementById("demo").innerHTML="<span>Paper</span>: this is the worst enemy of any rock";
};
function descriptionrock(){
document.getElementById("demo").innerHTML="<span>Rock</span>: preatty damn hard, impossible to cut";
};
function descriptionscissors(){
document.getElementById("demo").innerHTML="<span>Scissors</span>: they cut things...that's about it";
};
</script>
</head>
<body>
<div class="wrapper">
<h1>ROCK, PAPER OR SCISSORS . . .<br><span>CHOOSE ONE WISELY . . .<span></h1>
<div class="flame" title="Fire makes this intense...even more than it alredy is"></div>
<div class="flame" title="Fire makes this intense...even more than it alredy is"></div>
<div class="flame" title="Fire makes this intense...even more than it alredy is"></div>
<div id="objects">
<div class="object" id="paper"><a onmouseover="descriptionpaper()" onmouseout="clear()" onclick="userChoice='paper';game()"><img src="http://images.clipartpanda.com/sheet-paper-clipart-free-vector-blank-white-paper-cartoon-clip-art_114492_Blank_White_Paper_Cartoon_clip_art_medium.png"/></a></div>
<div class="object" id="rock"><a onmouseover="descriptionrock()" onmouseout="clear()" onclick="userChoice='rock';game()"><img src="http://pixabay.com/static/uploads/photo/2014/12/22/00/03/rock-576669_640.png"/></a></div>
<div class="object" id="scissors"><a onmouseover="descriptionscissors()" onmouseout="clear()" onclick="userChoice='scissors';game()"><img src="http://www.clipartbest.com/cliparts/dT8/okg/dT8okg6Te.png"/></a></div>
</div>
<p id="demo"></p>
</div>
</body>
</html>
这是我的 CSS:
h1
{
color:black;
text-align:center;
font-family:impact;
}
#demo
{
text-align:center;
color:black;
font-size:30px;
font-family:impact;
margin-top:-82px;
}
span
{
font-size: 60px;
}
.flame
{
height:350px;
display:inline;
content:url("http://vector-magz.com/wp-content/uploads/2013/08/fire-vector.png");
width:30%;
padding-left:15px;
position:relative;
margin-left:15px;
}
img
{
height:150px;
width:250px;
}
#objects
{
position:relative;
margin-top:-180px;
height:300px;
}
.object
{
width:33%;
display:inline;
height:100%;
margin-left:90px;
}
#rock
{
padding:50px;
}
#scissors
{
padding:0px;
}
.wrapper
{
width:1200px;
margin:0 auto;
}
javascript 中有一个 clear
方法,因此您不能将函数命名为它。将您的函数名称更改为任何其他名称,您的问题将得到解决。
https://developer.mozilla.org/en-US/docs/Web/API/Document/clear
我把它移到 jsfiddle 后它工作正常。 http://jsfiddle.net/4s273tek/1/
请记住,通常最好将 javascript/css/html 分开,以免在混乱中翻找错误。话虽如此,它应该有效。
>