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

Question

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:

 

 

Answer 1

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. 

Comments

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 .

---

tutaj akurat instrukcje warunkowe nie sa potrzebne :) wystarczy addeventlistener, poczytaj o nim :)

Answer 2

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.

Answer 3

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

Comments

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: )

---

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...)

---

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.  

---

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

---

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... 

---

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 )

---

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. 

---

Dlaczego innerHTML powinien być zastąpiony textContent ?

Jak nie łapać elementu za każdym odpaleniem eventu?

---

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);
   })();

---

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ć.