I cannot make the onmouseout function work

I cannot make the onmouseout function, that should make disappear some text from the "demo" paragraph, run in this simple rock, paper, scissors game I'm working on, any idea as to why it won't work, the function I'm talking about is in the head script, and the elements interested by it are the ones inside the "objects" div:

This is my HTML code:

<!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>

This is my 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;
}

Solution

There's a clear method in javascript so you can't name your function as it. Change your function name to anything else and your problem is gonna be solved.

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