JavaScript - problem

0

Witam mam taki problem otóż zaczynam sie uczyć JS i powiedzcie mi oco chodzi no bo tak... Robie stronke i ma sie wykonać bardzo prosty skrypt kiedy kliknę na lupkę to ma mi wyskoczyć div z inputem do wpisania po ponownym wciśnięciu div ma znowu zniknąć. Problem sobie sam rozwiązałem oto takim sposobem i działa oki.

<body>
<div class="searh-section ml-md-auto">

	<input id="searhInput" type="text" value="searh.." onFocus="this.value='' ">
	<i  onclick="searhClick()">Lupka</i>

</div>

<script type="text/javascript">

	var searhDisplay = "none";	

	function searhClick()
	{

		if(searhDisplay == "none")
		{
			alert(searhDisplay);
			document.getElementById('searhInput').style.display = 'inline-block';
			searhDisplay = "inline-block";
			alert(searhDisplay);
		}
		else if (searhDisplay == "inline-block")
		{
			document.getElementById('searhInput').style.display = 'none';
		}

	}



</script>

Jak mowie problem rozwiązany ale na początku miałem inny pomysł zeby do zmiennej searhDisplay przypisać bezpośrednio z css styl display czyli w ten oto sposób

<script type="text/javascript">

	var searhDisplay = document.getElementById('searhInput').style.display;	

	function searhClick()
	{

		if(searhDisplay = "none")  
		{
			alert(searhDisplay);
			document.getElementById('searhInput').style.display = 'inline-block';
			searhDisplay = "inline-block";
			alert(searhDisplay);
		}
		else if (searhDisplay = "inline-block")
		{
			document.getElementById('searhInput').style.display = 'none';
		}

	}



</script>

I możecie mi powiedzieć czemu w tym przypadku program działa tylko w tedy kiedy w if jest jeden znak równości a nie 2 ? Przecież znak = to znak przypisania a == to znak porównania :/

2

Ojej...
Czyli która wersja działa? Ta pierwsza czy ta druga?
Ta pierwsza, co do zasady działania wygląda ok. Tzn, jest stylistycznie brzydka, przekombinowana i zrobiona nie tak jak Bozia kazała, ale powinna działać.

Natomiast ta druga poprawnie funkcjonować nie będzie. Za każdym razem wywoływany będzie tylko pierwszy if. W środku ifa, przypisujesz do zmiennej searhDisplay stringa "none". I ten string jest zwracany. Javascript interpretuje niepuste stringi jako wartość true. I dlatego pierwszy if przechodzi. A do else if nigdy nie dojdzie. Mógłbyś ten warunek wywalić i tak samo by działało, a właściwie to nie działało.

A teraz po kolei co jest nie tak z tym pierwszym kodem:

Dlaczego w ogóle używasz do porównania stringów (łańcuchów znaków)? Masz dwa stany, okienko jest otwarte, albo nie. Tutaj wystarczyłoby porównanie dwóch wartości true i false. Kiedy jest zamknięte, to do zmiennej przypisujesz false, kiedy otwarte to true. Jakoś tak:

var searhDisplay = false;  

function searhClick() {
    if (searhDisplay) {
        document.getElementById('searhInput').style.display = 'none';
        searhDisplay = false;
    } else {
        alert(searhDisplay);
        document.getElementById('searhInput').style.display = 'inline-block';
        searhDisplay = true;
    }
}

Już jest krócej i bardziej przejrzyście.
Druga sprawa, dwa razy przeszukujesz drzewko dokumentu w poszukiwaniu elementu od id searhInput. Wystarczy zrobić to raz i przypisać do zmiennej:

var searhDisplay = false;  
var searhInput = document.getElementById('searhInput');

function searhClick() {
    if (searhDisplay) {
        searhInput.style.display = 'none';
        searhDisplay = false;
    } else {
        alert(searhDisplay);
        searhInput.style.display = 'inline-block';
        searhDisplay = true;
    }
}

A tak w ogóle, takie rzeczy - dodawanie niezbyt skomplikowanych styli - powinno się robić za pomocą manipulacji klasą elementu, a nie wciskać tam javascript. Warto oddzielić wygląd od zachowania

var searhDisplay = false;  
var searhInput = document.getElementById('searhInput');

function searhClick() {
    if (searhDisplay) {
        searhInput.classList.remove('open');
        searhDisplay = false;
    } else {
        alert(searhDisplay);
        searhInput.classList.add('open');
        searhDisplay = true;
    }
}

i w css

#searhInput {
  display: none;
}

#searhInput.open {
  display: inline-block;
}

A tak się szczęśliwie składa, że istnieje już wbudowana funkcja w javascript (właściwie to DOM), która pozwala na włączanie i wyłączanie klas. Czyli classList.toggle(). Kod może się nam skrócić jeszcze bardziej

var searhInput = document.getElementById('searhInput');

function searhClick() {
    searhInput.classList.toggle('open');
}

Jest jeszcze kilka rzeczy które można usprawnić. Wywalić ten onClick z elementu DOM i przypisać do eventlistenera. Zamienić te vary na const, w końcu mamy 2019. Dodać klasę do inputu, i stylować po klasie, a nie po id. Ale to już drobiazgi.
I po angielsku "szukać" piszemy "SEARCH" a nie "SEARH", bo chyba o to chodziło

0

A i tak cały ten chaos zastąpilem jedna linijka jquary fadeToggle i się chowa i znika Ale dzięki jak wrócę do domu zobaczę co tam napisałeś:)

2

Nie używaj jQuery żeby zrobić toggle, zamiast tego możesz użyć np. metody toggle z https://developer.mozilla.org/en-US/docs/Web/API/Element/classList, najlepiej w ogóle nie używaj jQuery, API przeglądarki Ci wystarczy.

2

A na grzyba ci ta dodatkowa zmienna?

function searhClick() {
  var stan = document.getElementById('searhInput').style.display;
  if (stan=="inline-block") {stan = "none";} else {stan = "inline-block";}
}

1 użytkowników online, w tym zalogowanych: 0, gości: 1