我无法使 onmouseout 功能工作答案

【问题标题】：I cannot make the onmouseout function work我无法使 onmouseout 功能工作
【发布时间】：2015-04-02 20:04:52
【问题描述】：

我无法制作 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;
}

【问题讨论】：

我建议从 css 文件的名称中删除空格，以防万一。

标签： javascript html function onmouseout

【解决方案1】：

在 javascript 中有一个 clear 方法，所以你不能将你的函数命名为它。将您的函数名称更改为其他任何名称，您的问题就会得到解决。

https://developer.mozilla.org/en-US/docs/Web/API/Document/clear

【讨论】：

非常感谢它的工作，也非常快速的回答:)

【解决方案2】：

我将它移到 jsfiddle 后它工作正常。 http://jsfiddle.net/4s273tek/1/

请记住，通常最好将 javascript/css/html 分开，以防止不得不从一团糟中挖掘错误。话虽如此，它应该可以工作。

【讨论】：

我会记住的，谢谢 :) 因为，正如您可能从我的代码中看出的那样，我是一个初学者，您认为我在编写代码的方式上有什么可以改进的吗？任何建议都会有所帮助
绝对！每个人都必须从某个地方开始，你已经有了一些好的概念。我提到代码分离的唯一原因是因为在构建某些东西时很容易不这样做，但是从个人经验来说，随着代码的增长，维护和开发变得越来越困难。我注意到的一件事是，您似乎用分号结束了所有行。这是一种很好的做法，但实际上您不必将它们放在每个右括号 } 之后，您通常只需要在方法中调用匿名函数时才需要这样做，否则它会自行关闭！