Dlaczego druga funkcja javascript mi nie odpala ? I Jak zrobić by po kliknięciu w okienko menu z np. Michaelem Jordanem duże okno (informacyjne) się otwierało ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" ></script>
<script src="scripts.js"></script>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Mukta+Mahee" rel="stylesheet">
</head>
<body>
<div class="main">
<div id="foto" onclick="myFunction()">
<div id="curry" ><img src="curry.jpg" style="width: auto; height: 80vh;"></div>
<div id="westbrook"><img src="westbrook.jpg" style="width: auto; height: 80vh;"></div>
<div id="lebron"><img src="lebron.jpg" style="width: auto; height: 80vh;"></div>
<div id="harden"><img src="harden.jpg" style="width: auto; height: 80vh;"></div>
<div id="kobe"><img src="kobe.jpg" style="width: auto; height: 80vh;"></div>
<div id="wade"><img src="wade.jpg" style="width: auto; height: 80vh;"></div>
</div>
<div id="quadrat" onclick="myFunction()"></div>
<div id="stars" onclick="myFunction()">
<div class="best" onclick="next_window()"> Michael jordan</div>
<div class="best"> Kobe Bryant</div>
<div class="best"> Lebron James</div>
<div class="best"> Stephen Curry</div>
<div class="best"> Dwyane Wade</div>
<div class="best"> Kevin Durant</div>
<div class="best"> Shaquille O'Neal</div>
<div class="best"> Scottie Pippen</div>
<div class="best"> Shaquille O'Neal</div>
<div class="best"> Russell Westbrook</div>
<div class="best"> Allen Iverson</div>
<div class="best"> Vince Carter</div>
<div class="best"> Marcin Gortat </div>
</div>
</body>
</html>
body{
width:100%;
height:100vh;
margin:0;
padding: 0;
}
#foto{
position: absolute;
top:10vh;
left:29%;
}
#curry,#westbrook,#lebron,#harden,#kobe,#wade{
float: left;
margin: 0;
padding: 0;
background-size: 100% 100%;
}
#curry{
animation:curry_animation 1s;
opacity:1;
margin-top:0;
}
@keyframes curry_animation{
from{opacity: 0;margin-top:-140vh;}
to{opacity:1; margin-top:0;}
}
#westbrook{
animation:westbrook_animation 1s;
opacity:1;
margin-top:0;
}
@keyframes westbrook_animation{
from{opacity: 0;margin-top:200vh; opacity:0;}
to{opacity:1; margin-top:0; opacity:1;}
}
#lebron{
animation:lebron_animation 1s;
opacity:1;
margin-top:0;
}
@keyframes lebron_animation{
from{opacity: 0;margin-top:-180vh; opacity:0;}
to{opacity:1; margin-top:0; opacity:1;}
}
#harden{
animation:harden_animation 1s;
opacity:1;
margin-top:0;
}
@keyframes harden_animation{
from{opacity: 0;margin-top:200vh; }
to{opacity:1; margin-top:0; }
}
#kobe {
animation:kobe_animation 1s;
opacity:1;
margin-top:0vh;
}
@keyframes kobe_animation{
from{opacity:0;margin-top:-200vh; }
to{opacity:1; margin-top:0; }
}
#wade {
animation:wade_animation 1s;
opacity:1;
margin-top:0vh;
}
@keyframes wade_animation{
from{opacity:0;margin-top:600vh; }
to{opacity:1; margin-top:0; }
}
#foto{
width: 70%;
height: 100vh;
position: absolute;
background-color: rgb(255, 255, 255);
left: 14.6%;
top:8vh;
z-index: 0;
padding: 0;
margin: 0;
}
.main{
width: 100%;
height: 100vh;
position: absolute;
background-color: rgb(255, 255, 255);
}
#quadrat{
position: absolute;
top:3.2vh;
left: 2.5vh;
width: 84.5%;
height: 91vh;
border: black 0.1vh solid;
border-radius:0.3%;
z-index: -1;
}
#stars{
width:12%;
height: auto;
z-index: -1;
text-align: center;
line-height:7vh;
position: absolute;
left:87%;
top:3vh;
}
.best{
border:0.1vh solid black;
font-size:3vh;
height: 7vh;
border: solid 0.04vh rgb(255, 255, 255);
background-color: rgb(0, 0, 0);
color:white;
}
.best:hover{
background-color: olivedrab;
}
function myFunction(){
var x = document.getElementById("foto" );
var y= document.getElementById("quadrat");
var z=document.getElementById("stars");
var q=document.getElementById("quadrat");
if (x.style.display === "block") {
x.style.display = "block";
} else {
x.style.display = "block";
}
if (y.style.display === "block") {
y.style.display = "block";
} else {
y.style.display = "block";
}
if (x.style.zIndex = "-1") ;
if(z.style.zIndex="1");
if(q.style.zIndex="1");
return;
}
function next_window(){
var change_window = document.querySelector('.best');
if(change_window.style.width="12px";)
}
