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

Java script : Wyświetlenie tekstu w drugim divie po najechaniu na pierwszy .

VPS Starter Arubacloud
0 głosów
2,004 wizyt
pytanie zadane 24 września 2017 w JavaScript przez Browarnik123 Użytkownik (830 p.)

Cześć ! Zrobiłem sobie stronkę lecz nie wiem jak zrobić tak by przy najechaniu na jedno pole w drugim polu pojawił się niewidoczny wcześniej tekst .

 

Załączam obrazek by moje pytanie było bardziej zrozumiałe:

 

 

3 odpowiedzi

0 głosów
odpowiedź 24 września 2017 przez ProgramistaStepek Nałogowiec (27,020 p.)

Podpinasz się pod dwa zdarzenia: mouseenter i mouseleave. W pierwszym pokazujesz tekst np. poprzez zmianę z 

display: none

na 

display: block

a w drugim odwrotnie. 

komentarz 24 września 2017 przez Browarnik123 Użytkownik (830 p.)
Dzięki . Lecz ja nie wiem jak to zrobić . Miałem dopiero 1 lekcję z javascript i nie było nic nawet o instrukcjach warunkowych .
komentarz 24 września 2017 przez turtelian Obywatel (1,760 p.)
tutaj akurat instrukcje warunkowe nie sa potrzebne :) wystarczy addeventlistener, poczytaj o nim :)
0 głosów
odpowiedź 24 września 2017 przez Ehlert Ekspert (214,220 p.)
edycja 24 września 2017 przez Ehlert

Można to zrobić na dwa sposoby. 

  1. CSS. Pod warunkiem że dwa elementy można złapać selektorem np. brata, rodzica.
    <div id="mouse"></div>
    <div id="boom"></div>
    <style>
    div{
      width: 50px;
      height: 50px;
      background-color: red;
    }
    
    #mouse + #boom{
      display: none;
    }
    
    #mouse:hover + #boom{
      display: block;
    }
    </style>
    
  2. JS. addEventListener, przy czym pamiętaj żeby nie łapać elementu w funkcji i nie edytuj stylów, tylko manipuluj klasami css.
–1 głos
odpowiedź 24 września 2017 przez turtelian Obywatel (1,760 p.)
edycja 24 września 2017 przez turtelian
divnaktoryklikasz.addeventlistener('click', funkcja(){

document.getelementbyid('divktoryzmieniasz').innerhtml=tococheszdodac;})

 

chyba cos takiego powinno dzialac, jesli dobrze zrozumialem o co ci chodzi bo po chinsku to napisales a rysunek ala gmoch :D
PS: chyba ze "niewidoczny wczesniej tekst" oznacza ze tekst tam jest ale ma opacity =0; to wtedy w funckji zmieniasz ta wlasciwosc i tyle :)
Pss: jesli chodzi ci zeby to pojawialo sie po najechaniu a nie po clicku to zamoast click dajesz mouseover bodajze 
https://developer.mozilla.org/en-US/docs/Web/Events/mouseover

komentarz 24 września 2017 przez turtelian Obywatel (1,760 p.)

nie wiem czemu jest tu nawyk minusowania poprawnych rozwiazan, ( byc moze dlatgego ze nie daje kodu gotowego do kopiuj wklej i wymagam od zapytanego odrobiny pracy), ale moje rozwiazanie jest jak najbardziej poprawne(az z ciekawosci sprawdzilem czy nie pomylilem sie gdzie skoro dostalem -)
 

<script>
		var najezdzany = document.getElementById('najezdzany');
		var dodawany = document.getElementById('2');
		najezdzany.addEventListener('mouseover', function() {
			dupa();
		});

		function dupa() {
			dodawany.innerHTML = "dodane cos";
		}

	</script>

ten post pewie zostanie rowniez zminusowany bo nie napisalem identycznej funckji z usuwajacej napis (bo komus nie bedzie sie chcialo poczytac jakie zdazenie jest odpowiedzialne za zjechanie myszki z elementu D: )

1
komentarz 24 września 2017 przez Tomek Sochacki Ekspert (227,490 p.)
podawaj w odpowiedziach poprawne nazwy metod. Podanie błędnej nazwy aby ktoś inny musiał się namęczyć i dojść gdzie jest błąd to nie nauka, ale utrudnianie, zupełnie niepotrzebne. Mówię tutaj o pierwszej odpowiedzi, nie o komentarzach do niej, za którą dostałeś od kogoś minus być może właśnie za wprowadzanie w błąd nazwami metod... (nie ode mnie, ja nie bawię się w te całe plusowania i minusowania, no chyba, że ktoś na prawdę przegnie...)
komentarz 24 września 2017 przez Ehlert Ekspert (214,220 p.)

Downvote ode mnie i to nie nawyk forum. Odpowiedź, którą podałeś wnosiła dużo złych rzeczy.

  • Nazywy funkcji niepoprawne
  • innerHTML powinien być zastąpiony textContent
  • Łapiesz element przy każdym wykonaniu eventa. 

Następnym razem spróbuj przyłożyć się do odpowiedzi to będzie upvote. smiley 

komentarz 25 września 2017 przez turtelian Obywatel (1,760 p.)
to w takim razie twoja odpowiedz rowniez jest totalnie zla i bezsensu bo addEventListener nie jest funkcja a metoda:)
imo zwykle czepialstwo bo napisanie z malej poprawi kazde ide
komentarz 25 września 2017 przez Tomek Sochacki Ekspert (227,490 p.)

imo zwykle czepialstwo bo napisanie z malej poprawi kazde ide

no nie powiedziałbym... wg mnie również to błąd i koniec kropka. 

addEventListener nie jest funkcja a metoda

heh... teoretycznie racja, nawet jeśli zadeklarujemy funkcję bezpośrednio używając function xx() {} to można ją wywołać jako xx() lub window.xx() - oczywiście jeśli mówimy o środowisku przeglądarki z obiektem window. Ale nie czepiałbym się tego faktu bo akurat to ma małe znaczenie... 

komentarz 25 września 2017 przez turtelian Obywatel (1,760 p.)
aha nei czepialbys sie faktu że TY mylisz metode z funkcja ale fakt ze JA napisalem nazwe metody z malych liter co automatycznie podpowiada kazde ide to jzu wielki blad :D hipokryzja level hard eot )
komentarz 25 września 2017 przez Ehlert Ekspert (214,220 p.)

Gdybyś znał jsa to wiedziałbyś, że konkretnych metod tam nie ma. Metoda to funkcja będąca bezpośrednio własnością obiektu. Js ze swoim dynamicznym typowaniem nie ma metod, tylko funkcje przypisane do obiektu. Od strony interpretera "metody" wcale nie są własnością obiektów.

Widzisz nie wszystko kończy się na podstawowym kursie OOP. Zanim nazwiesz kogoś hipokrytą uzupełnij swoją niewiedzę. Btw kłania się również czytanie ze zrozumieniem, gdyż nigdzie nie nazwałem addEventListener funkcją. Mowa była o argumencie, ale chyba zbyt trudnego języka używam. 

komentarz 22 listopada 2017 przez Artek Stary wyjadacz (11,800 p.)
Dlaczego innerHTML powinien być zastąpiony textContent ?

Jak nie łapać elementu za każdym odpaleniem eventu?
1
komentarz 22 listopada 2017 przez Ehlert Ekspert (214,220 p.)
  1. Podaję hasło: xss https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
  2. (function() {
    	var  element = document.querySelector('#id'),
    		anything = document./*...*/;
    
    	element.addEventListener('click', function() {
    		antything.textContent += ' I <3 Js closures!';
    	}, false);
    })();
komentarz 22 listopada 2017 przez Artek Stary wyjadacz (11,800 p.)
Co do textContent vs innerHTML  to rozumiem i nie mam pytań.

Zastanawia mnie jednak czy w przypadku Twojego rozwiązania problemem nie będzie zasięg zmiennej "element". Będzie widoczna w całym bloku funkcji. Czy to nie problem? Jest jakby zmienną globalną a wiadomo, że należy ich unikać.

Podobne pytania

0 głosów
0 odpowiedzi 428 wizyt
pytanie zadane 27 lutego 2020 w JavaScript przez gugol9 Nowicjusz (140 p.)
0 głosów
1 odpowiedź 874 wizyt
+1 głos
2 odpowiedzi 549 wizyt

93,028 zapytań

141,991 odpowiedzi

321,294 komentarzy

62,375 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

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...