Question

我无法制作onmouseout功能，应该使“demo”段中的某些文字消失，在我正在研究的这个简单的摇滚，纸张，剪刀游戏中运行，任何关于它为什么不起作用的想法，我正在谈论的函数是在head脚本中，而对它感兴趣的元素是“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;
}

Answer 1

javascript中有clear方法，因此您无法为其命名。将您的功能名称更改为其他任何内容，您的问题就会得到解决。

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

Answer 2

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

请记住，通常最好将javascript / css / html分开，以防止不得不挖掘一团糟来发现错误。话虽如此，它应该有效。

我不能使onmouseout功能工作

2 个答案: