• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Dlaczego druga funkcja window_open javascript się nie włącza ?

0 głosów
95 wizyt
pytanie zadane 15 kwietnia 2018 w JavaScript, jQuery, AJAX przez DariuszH Gaduła (3,080 p.)

 

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";)

}


 

1
komentarz 15 kwietnia 2018 przez JSHolic Szeryf (78,620 p.)

Twój kod JS nie ma sensu:

  • var y= document.getElementById("quadrat");
    ...
    var q=document.getElementById("quadrat");

    Obie zmienne przechowują referencję do tego samego elementu.

  •     if (x.style.display === "block") {
                x.style.display = "block";
            } else {
                x.style.display = "block";
            }

    Jaki sens ma w if przypisanie wartości, która już jest przypisana? Blok else jest już bardziej logiczny. Ta sama sytuacja dla zmiennej y

  • if (x.style.zIndex = "-1") ;
    if(z.style.zIndex="1");  
    if(q.style.zIndex="1");

    Co ten kod ma robić? Tak samo ten (na dodatek występuje błąd SyntaxError):

    if(change_window.style.width="12px";)
    

Jeśli pisałeś w innych językach, to w JavaScript instrukcja warunkowa if nie różni się od nich jakoś specjalnie. Poczytaj dokumentację: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else

komentarz 15 kwietnia 2018 przez DariuszH Gaduła (3,080 p.)
A kodzik miał zmieniac styl, np opacity z 1 do 0.5 :) Dowolne parametry, Uczę się dopiero :D
komentarz 15 kwietnia 2018 przez DariuszH Gaduła (3,080 p.)
Już się połapałem. Siedze od rana nad css i się zmachałem nieco przy tym i selektory myliły mi się z przypisaniem itd ja piernicze :D

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 154 wizyt
0 głosów
1 odpowiedź 31 wizyt
+2 głosów
0 odpowiedzi 64 wizyt
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

64,865 zapytań

111,324 odpowiedzi

234,206 komentarzy

46,726 pasjonatów

Przeglądających: 230
Pasjonatów: 10 Gości: 220

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...