Odwołanie do div-a zawartego w funkcji przez inna funkcję

0

Witam forumowiczów.

Na wstępie dodam że w JavaScript stawiam dopiero pierwsze kroki jest to mój drugi skrypt w życiu.

Tworzę sobie stronkę w HTML z dodatkami JavaScript.

Mam stronę główną i podstronę kontakt. Użyłem JavaScript do wyświetlenia podstrony bez przeładowywania strony.

Oto kod który użyłem aby wyświetlić podstronę kontakt:

function clickcontact()
{
	var clickcontact = document.getElementById("contact");
	clickcontact.onclick = function()
	{
		document.getElementById("content-section").innerHTML;
		var newHTML = "<div id='content-wrapper'>" +
		"<h1>Contact</h1>" +
		"<h2>To contact with us use the form below.</h2>" +
		"<div id='form'>" +
		"<input type='text' placeholder='Name...' id='input-text'>" +
		"<br>" +
		"<input type='text' placeholder='E-mail...' id='input-text'>" +
		"<br>" +
		"<textarea id='contact-textarea' placeholder='Message...'></textarea>" +
		"<div id='button-send'>Send</div>" +
		"</div>" +
		"<div class='clr'></div>" +
	"<div id='line-sepparator'></div>" +	
	"</div>";		
	
		
		document.getElementById('content-section').innerHTML = newHTML;
	}
}

Oczywiście później funkcja jest wywoływana "windows.onload" i to działa prawidłowo.(ten element umieściłem niżej)

W powyższej funkcji zawarty jest HTML a w nim przycisk "wyślij" (

Send
)
Chciałbym aby po kliknięciu na ten przycisk wyświetlał się komunikat że wiadomość została wysłana.
Do tego użyłem następujący kod który nie działa:</p>
function send()
{
	var send = document.getElementById("button-send");
	send.onclick = function()
	{
		alert("Message Send");
	}
}

No i oczywiście na koniec obie funkcję wywołane są tym kodem:

window.onload = function()
{

	clickcontact();
        send();
}

Moja diagnoza(niekoniecznie trafna): Funkcja "send" odnosi się do div-a zawartego w funkcji "clickcontact" i podczas ładowania strony funkcja "send" nie widzi tego div-a.

Jak zmienić kod funkcji "send" aby wyświetlała prawidłowo komunikat(po kliknięciu na przycisk) na podstronie kontakt.

1

problem na oko jest ze sposobem, w który dodajesz HTML do strony. Wybrałeś najgorszy z możliwych sposobów, czyli tworzysz stringa, wrzucasz go do JS i dodajesz plusami. Czyli masochistycznie zaciemniasz kod, mieszasz logikę z wyglądem, i wprowadzasz chaos ;) Po to sa pliki HTML, żeby tam ładować HTML, w plikach/skryptach JavaScript pisze się logikę/zachowania, a nie szablon. Więc wystarczy jedynie wstawić do HTML ukrytego diva, a JavaScriptem po prostu pokazywać go ("odukrywać").

I tu dochodzimy do sedna, dlaczego nie działa. Tak na moje (patrząc tylko po kodzie, nie odpalałem), to funkcja send jest prawidłowo napisana, tyle że probujesz się odwołać do elementu o id button-send, którego jeszcze nie ma, ponieważ za jego dodanie do strony, odpowiedzialna jest funkcja clickcontact.onclick, która wywoła się dopiero gdy... uzytkownik kliknie clickcontact. Ponieważ jeszcze nie kliknął, to element button-send nie istnieje.

Gdybyś jednak zrobił tak jak napisałem, w HTMLu ukryty div, to element button-send od początku już by tam był, i byś mógł na nim operować.

Ukrywanie diva mozna zrobic za pomocą CSS - ustawia się własciwosci display na wartość none. CSSem mozna manipulować np. w dołączanym arkuszu CSS, można też za pomocą JavaScriptu itp. No i warto poznać koncepcję klas CSS, które dużo ułatwiają. (aha, w ogóle juz powinieneś uzyc klasy w co najmniej jednym miejscu ( zamiast id) bo piszesz


input type='text' placeholder='Name...' id='input-text'>" +
        "<br>" +
        "<input type='text' placeholder='E-mail...' id='input-text'>" +
        "<br>"

czyli próbujesz nadać dwóm elementom to samo id input-text (element z okreslonym id może być tylko jeden na stronie). Czyli zamień na class='input-text' (chociaż to i tak bez sensu klasa).

0

Do wyświetlania całych podstron bez przeładowywania używa się ajax-a.

0

można użyć, ale jeśli to jest jeden div (tak jak wyżej) nie ma to większego sensu i lepiej osadzić po prostu podstronę w ukrytym divie...
http://jsfiddle.net/uff6f5bq/2/
(przy ajaxie byłby problem, że ten html by musiał być dopiero pobrany z netu, czyli opóźnienie ze strony interfejsu + dodatkowe zapytanie do serwera + dodatkowy transfer danych).

0

Już wszystko działa. Zrobiłem zgodnie ze wskazówkami LukeJL a mianowicie odwołałem się do klasy i dałem display:none.

Mam jeszcze tylko jedno pytanie:

element z okreslonym id może być tylko jeden na stronie
czy to tylko dlatego aby inni programiści wiedzieli o co chodzi i żeby kod był przejrzysty? Czy to jest nie tolerowane np przez roboty google?

Strony buduję na razie amatorsko dla siebie tylko.

Dziękuje za pomoc i pozdrawiam:)

1

czy to tylko dlatego aby inni programiści wiedzieli o co chodzi i żeby kod był przejrzysty?

id to skrót od identifier (identyfikator). Identyfikujesz w ten sposób elementy na stronie, inaczej jakbyś chciał zidentyfikować element, skoro id byłoby niejednoznaczne?

A jak chcesz oznaczyć kilka elementów o podobnym typie (i je potem np. ostylować), to możesz użyć klasy CSS ( np.

).</p>

Czy to jest nie tolerowane np przez roboty google?

nie jest tolerowane przez specyfikację HTML:

3.2.5.1 The id attribute

The id attribute specifies its element's unique identifier (ID). [DOM]

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

http://www.w3.org/TR/2014/CR-html5-20140731/dom.html#the-id-attribute

poza tym działanie programu będzie dość ułomne (np. document.getElementById zwróci ci tylko pierwszy z elementów o tym id).

(klasy też nie złapiesz getElementById, swoją drogą, ale od tego jest querySelectorAll albo... biblioteka jQuery).

0

Strony które tworzę nie są jeszcze zbytnio rozbudowane i nie kolidowało to z niczym. Teraz na bieżącej już wszystko poprawiłem.

Dziękuje za cenne wskazówki na przyszłość i pozdrawiam.

Problem rozwiązany.

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