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

Java script nie ukrywa elementu przy pierwszym uruchomieniu

VPS Starter Arubacloud
+1 głos
253 wizyt
pytanie zadane 30 stycznia 2023 w JavaScript przez zbiku25 Bywalec (2,940 p.)

Chcę zastosować rozwiązanie, w którym menu pojawia mi się po zaznaczeniu checkbox. Wszystko działa OK poza tym, że przy pierwszym otworzeniu strony menu jest widoczne pomimo tego, że checbox jest odznaczony :(

Czy wie ktoś dlaczego tak zachowuje się przeglądarka i jak to naprawić?

HTML

<nav>

	<div class="logo"><span class="purple">A</span>kordeonista.<span class="grey">PL</span></div>
	<div class="hamb"><label><input type="checkbox" id="myCheck" onclick="myFunction()"><i class="fa-solid fa-bars fa-2x"></i></label></div>
	<div id="menu">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Wynajmij mnie</a></li>
			<li><a href="#">Sklep</a></li>
			<li><a href="#">Kurs</a></li>
			<li><a href="#">inne</a></li>
			<li><a href="#">Kontakt</a></li>
			<li><a href="#">Logowanie</a></li>
		</ul>
	</div>

</nav>

JS

function myFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("myCheck");
  // Get the output text
  var text = document.getElementById("menu");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

 

2 odpowiedzi

+2 głosów
odpowiedź 30 stycznia 2023 przez Wiciorny Ekspert (269,120 p.)
Wszystko działa OK poza tym, że przy pierwszym otworzeniu strony menu jest widoczne pomimo tego, że checbox jest odznaczony

Generalnie funkcja twoja wykonywana jest na onClick, które nie wydarzyło się w momencie załadowania strony. 
Więc tak naprawde 

else {
    text.style.display = "none";
  }

się nie wykonuje dlatego, że twoja funkcja nie uruchomi się przy załadowaniu. 

Sprawdź sobie onLoad/Load event 
​​​​​​​https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

komentarz 30 stycznia 2023 przez TOWaD Mądrala (5,700 p.)
  ....

 #menu ul li a:hover {
      color: #D90A2C;
      transition: 0.2s;
    }
może tu?
    #menu {
      display: none;
    }
     

ale nie się nie znam za bardzo na css, i podobno nie można stawiać #. [1 0 0]

edit:: w js działało:

<nav>
 
    <div class="logo"><span class="purple">A</span>kordeonista.<span class="grey">PL</span></div>
    <div class="hamb"><label><input type="checkbox" id="myCheck" onclick="myFunction()"><i class="fa-solid fa-bars fa-2x"></i></label></div>
    <div id="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Wynajmij mnie</a></li>
            <li><a href="#">Sklep</a></li>
            <li><a href="#">Kurs</a></li>
            <li><a href="#">inne</a></li>
            <li><a href="#">Kontakt</a></li>
            <li><a href="#">Logowanie</a></li>
        </ul>
    </div>
    <script>
    myFunction();
    function myFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("myCheck");
  // Get the output text
  var text = document.getElementById("menu");
 
  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}
    </script>
 
</nav>

 

komentarz 30 stycznia 2023 przez zbiku25 Bywalec (2,940 p.)

@TOWaD

Domyślam się o co Ci chodzi i to dobry kierunek ale to musiałoby być powiązane z nadaniem {position:fixed; left:0} przy zaznaczonym chekbox oraz {left:-100%} przy odznaczonym checkbox. Niestety nie wiem jak ustanowić taką regułę... Próbowałem jak poniżej ale nie działa :(

	.hamb input[type=checkbox]:checked ~ .menu
		{
			left:-100%;
		}
		

 

komentarz 30 stycznia 2023 przez TOWaD Mądrala (5,700 p.)

ale co uruchomienie funkcji nie działa myFunction();

<script>
    myFunction();
    </script>

 

komentarz 30 stycznia 2023 przez zbiku25 Bywalec (2,940 p.)
Już skupiłem się na tutaj na Twojej sugestii co do CSS bo JAVA SCRIPT w ogóle nie znam :(
komentarz 30 stycznia 2023 przez TOWaD Mądrala (5,700 p.)
edycja 30 stycznia 2023 przez TOWaD

Tak jak ja CSS.

 .hamb input[type=checkbox]
        {
            cursor:pointer;
            /*display:none; //jak tego nie ma to wygląda oki.*/
        }

i w css i js z funkcją;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">

    <title>Document</title>
</head>
<body>
    <nav>
        <div class="logo"><span class="purple">A</span>kordeonista.<span class="grey">PL</span></div>
        <div class="hamb"><label><input type="checkbox" id="myCheck" onclick="myFunction()"><i class="fa-solid fa-bars fa-2x"></i></label></div>
        <div id="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Wynajmij mnie</a></li>
                <li><a href="#">Sklep</a></li>
                <li><a href="#">Kurs</a></li>
                <li><a href="#">inne</a></li>
                <li><a href="#">Kontakt</a></li>
                <li><a href="#">Logowanie</a></li>
            </ul>
        </div>
     <script src="fun.js"></script>
    </nav>
    
    
</body>
</html>

js

myFunction();
function myFunction() {
    // Get the checkbox
    var checkBox = document.getElementById("myCheck");
    // Get the output text
    var text = document.getElementById("menu");
   
    // If the checkbox is checked, display the output text
    if (checkBox.checked == true){
      text.style.display = "block";
    } else {
      text.style.display = "none";
    }
  }

css

@media screen and (max-width:1000px)
{
     
    nav
    {
        display:flex;
        height: 90px;
        justify-content:space-evenly;
        border-bottom:1px solid #ccc;
    }
     
    .logo
    {
        font-size:1.8rem;
        font-weight:600;
        margin-left:10px;
        display:flex;
        align-items:center;
        position:relative;
    }
 
    #menu
    {
        position:fixed;
        top:90px;
        width:100%;
 
    }
 
    #menu ul
    {
        position:fixed;
        top:90px;
        width:100%;
        padding: 0;
        margin: 0;
    }
 
    #menu ul li
    {
        border:1px solid white;
        font-weight:600;
        justify-content:center;
        padding:15px;
        text-align:center;
        background-color:#232F3E;
        list-style:none;
    }
 
    #menu ul li a
    {
        text-decoration:none;
        color:white;
        font-size:1.2rem;
        color: white;
    }
 
    #menu ul li a:active
    {
        color:#D90A2C;
    }
 
    #menu ul li a:hover
    {
        color:#D90A2C;
        transition: 0.2s;
    }
    #menu
    {
        display: none;
    }
     
    .hamb
        {
            display:flex;
            align-items:center;
        }
         
    .hamb input[type=checkbox]
        {
            cursor:pointer;
            /* display:none; */
        }
         
    .hamb label
        {
            cursor:pointer;
        }
    }

 

+2 głosów
odpowiedź 31 stycznia 2023 przez VBService Ekspert (251,210 p.)

Proponuje rozwiązanie z classList.toggle

[ on-line ]

function myFunction() {
  const menu = document.getElementById("menu");
  menu.classList.toggle('menu-hide');
}

 

1
komentarz 31 stycznia 2023 przez zbiku25 Bywalec (2,940 p.)
Bardzo dziękuję Wam wszystkim za zaangażowanie i pomoc. Temat rozwiązany. Dodatkowo rozwiązanie w czystym CSS dzięku uprzejmości VBService jest również dostępne tutaj:

https://forum.pasja-informatyki.pl/578981/ukrycie-div-pod-kliknieciu-checkbox#c579000

 

Pozdrawiam,

Podobne pytania

0 głosów
3 odpowiedzi 690 wizyt
0 głosów
1 odpowiedź 166 wizyt
pytanie zadane 27 stycznia 2016 w Rozwój zawodowy, nauka, praca przez kaczmar Początkujący (490 p.)
0 głosów
1 odpowiedź 91 wizyt
pytanie zadane 19 października 2022 w HTML i CSS przez zbiku25 Bywalec (2,940 p.)

92,452 zapytań

141,262 odpowiedzi

319,074 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...