Onclik uruchamia się dopiero po drugim klinięciu

Question

Cześć,

Czy ktoś jest w stanie mi powiedzieć dlaczego pasek wyboru języka otwiera się dopiero po drugim kliknięciu na niego?

JS

var lang;
lang = document.querySelector("#language");

function change()
	{
		if (lang.style.display==="none")
		{
			lang.style.display="block";
		}
		else
		{
			lang.style.display="none";
		}
	}

HTML

<div onclick="change()" class="lang">
  <div class="center">PL</div>
		<ul id="language" class="lang-choice">
				<li><a href="#">EN</a></li>
				<li><a href="#">DE</a></li>
		</ul>
</div>

 

CSS

.lang
{
	margin-right:50px;
	position:relative;
	cursor:pointer;
}

.lang-choice
{
	position:absolute;
	list-style:none;
	top:100%;
	left:0;
	padding:0;
	margin:0;
	display:none;
}

.lang-choice li
{
	position:relative;
	left:0;
}

.lang-choice li a
{
	display:flex;
	align-items:center;
}


.lang-choice li:hover
{
	text-decoration:underline;
}

.lang-choice li:nth-child(1)
{
	padding:7px 0;
}

 

Answer 1

Przy pierwszym kliknięciu warunek

if (lang.style.display==="none")

nie będzie spełniony (bo nie masz dla tego elementu ustawionego stylu display na none; masz ustawiony styl w klasie CSS, ale NIE na elemencie), więc wykona się:

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

Dopiero przy drugim kliknięciu lang.style.display jest ustawiony na "none", więc zostanie przestawiony na "block".

Możesz po prostu dodać w HTML sobie: style="display: none", albo lepiej - zmienić warunek tak, żeby sprawdzał czy lang.style.display jest w ogóle ustawiony (czy jest pustym stringiem).

Comments

Super, dziękuję.

Dodałem drugi warunek: .. || lang.style.display==""

i teraz działa :)

Answer 2

Możesz też operować bezpośrednio na klasach css (zamiast "inline style"), np. za pomocą matches

[ on-line ]

.lang-choice {
  ...
  display:none;
}
.lang-choice.show {
  display: block;
}

var lang;
lang = document.querySelector("#language");

function change()
{
  if (lang.matches('.show'))
    lang.classList.remove('show');
  else
    lang.classList.add('show');
}

 

Comments

Tylko po co w tak skomplikowany sposób, skoro można to zrobić w jednej linijce:

function change() {
	lang.classList.toggle( 'show' );
}

Nawet, jakbyśmy chcieli z jakiegoś powodu rozbić to na warunek z remove() i add(), to classList zawiera metodę do sprawdzania, czy element ma daną klasę:

function change() {
	if ( lang.classList.contains( 'show' ) ) {
		lang.classList.remove( 'show' );
	} else {
		lang.classList.add( 'show' );
	}
}