0
Я не могу сделать функцию onmouseout, которая должна удалить какой-либо текст из абзаца «demo», запустить в этой простой игре, бумаге, ножницах, над которой я работаю, любая идея относительно почему он не будет работать, функция Я говорю о том, в голове сценарий, а элементы, заинтересованные ею те, внутри «объектов» ДИВ:Я не могу заставить работу onmouseout работать
Это мой 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, только для любого случая. –