我无法使onmouseout函数工作

I cannot make the onmouseout function work

本文关键字：函数 工作 onmouseout      更新时间：2023-09-26

我无法制作onmouseout函数，它应该会使"演示"段落中的一些文本消失，在我正在开发的这个简单的石头、纸、剪刀游戏中运行，任何关于它为什么不起作用的想法，我所说的函数在头脚本中，它感兴趣的元素是"对象"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分开，以防止必须在混乱中查找错误。话虽如此，它应该起作用。

>
相关文章：