Gdzie zrobiłem błąd ?? Wysuń/Wsuń nie reaguje.....

pytanie zadane 9 kwietnia 2018 w JavaScript przez DariuszH Gaduła (3,100 p.)


function myFunction(){

var x = document.getElementById('.right_window');

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

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





<button onclick="myFunction()">Try it</button>








<div class="right_window">



<ul>

<li>Michael Jordan</li><br>

<li>Kobe Bryant</li><br>

<li>Lebron James</li><br>

<li>Stephen Curry</li><br>

<li>Dwyane Wade</li>

<li>Kevin Durant</li>

<li>Shaquille O'Neal</li>

<li>Scottie Pippen</li>

<li>Shaquille O'Neal</li>

<li>Russell Westbrook</li>

<li>Allen Iverson</li>

<li>Vince Carter</li>

<li>Marcin Gortat</li>

</ul>




</div>



</div>







<div class="footer">

</div>



</body>



</html>

body{
	width:100%;
	height:500vh;
	margin:0;
	
}


.main{
width: 100%;
height: 100vh;
float: right;
background-color: darkgoldenrod;


}

.right_window{

width:19%;
float: right;
height:100vh;
background-color: cadetblue;

}

ul{
width: 19%;
list-style:none;
display:block;
height:100vh;
position: absolute;
margin:0 auto;
padding: 0;


}


 li{

float: left;
width:100%;
height: 7.52vh;
line-height: 7vh;
text-align:center;
color:white;
font-size: 4vh; 
list-style-type:none;
border-bottom:black solid 1px;

}


li:hover{


    float: left;
 
    width:100%;
    height: 7.4vh;
    line-height: 7vh;
    text-align:center;
    color:white;
    font-size: 4vh; 
    list-style-type:none;
    border-bottom:black solid 1px;

background-color: rgb(10, 10, 5);

}



























.footer{
    
    width:100%;
    background-color: black;
    height: 12vh;
    position: relative;
    top:500vh;
    
}

Wsuń /wysuń nie chce działać. Gdzieś musiałem zrobić jakiś błąd, którego nie widzę ?

3 odpowiedzi

odpowiedź 9 kwietnia 2018 przez Pac Plus Mądrala (5,560 p.)
edycja 15 kwietnia 2018 przez Pac Plus

Najlepsza

Podając kod, postaraj się ograniczyć do najbardziej potszebnych jego części, i pozbyć się białych znaków w miejcach gdzie tylko zajmują miejsce.

Do problemu:

1. element `.rightWindow` to klasa nie id. Możesz dostać się do tablicy z klasami objektu (jako, że klas może być zdefiniowanych więcej niż jedna) w ten sposób:

let x = document.getElementByClassName('.right_widow');
// pierwsza klasa to: `x[0]`
x[0].style.display = 'none';

2. nie zdefiniowałeś warości display. Proponuję zdefiniować ją inline tak żeby jej stan był jawny:

<div class="right_window" style="display: none">

odpowiedź 9 kwietnia 2018 przez Snejki Stary wyjadacz (14,520 p.)

Funkcja getElementById służy do pobierania elementów, którym nadano identyfikator, a nie klasę!

W twoim kodzie musisz użyć funkcji

getElementsByClassName();

ale lepiej zamienić klasę na id w divie, bo to chyba div unikalny:

<div id="right_window">

i wtedy:

document.getElementById('#right_window');

komentarz 9 kwietnia 2018 przez DariuszH Gaduła (3,100 p.)

Faktycznie ! Ale i tak nie dziala :)

komentarz 9 kwietnia 2018 przez DariuszH Gaduła (3,100 p.)

Kolega poniżej pomógł. Ale Tobie też dzięki. Muszę postudiować odwołacze :D

komentarz 9 kwietnia 2018 przez DariuszH Gaduła (3,100 p.)

@Snejki, Już wiem czemu nie działa :) Podałeś mi w document.getElementById('#right_window'); , znak# a nie powinno być # :D

komentarz 9 kwietnia 2018 przez Snejki Stary wyjadacz (14,520 p.)

@DariuszH A rzeczywiście :D

odpowiedź 9 kwietnia 2018 przez Kamil Łydka Stary wyjadacz (13,600 p.)

var x = document.querySelector(".right_window");

W ten sposób odwołasz się do klasy.

1	komentarz 9 kwietnia 2018 przez DariuszH Gaduła (3,100 p.) Dziaaaaaałaaaaaa :D Dzięki !! :D Muszę gdzieś te przypisanie do zmiennych pobieranych elementów znaleźć by się pouczyć :D

komentarz 9 kwietnia 2018 przez Kamil Łydka Stary wyjadacz (13,600 p.)

Podałem Ci sposób, kiedy jesteś przekonany, że masz tylko jeden element o danym specyfikatorze na stronie. Choć wtedy często po prostu warto odwołać się do id, tak jak próbowałeś, tylko musisz nadać go elementowi w HTML.

Jeśli będziesz miał sporo elementów na stronie z daną klasą i dla każdego ma działać jakaś funkcja, to pomoże prawie to samo, ale zwracające tablicę: (będziesz też prawdopodobnie musiał je potem przelecieć pętlą)