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

Dodawanie treści do diva za pomocą JS'a

VPS Starter Arubacloud
0 głosów
3,622 wizyt
pytanie zadane 9 stycznia 2017 w JavaScript przez vonziu Nowicjusz (120 p.)

Witam!
Mam dosyć ciekawe pytanie, mianowicie mam diva a w środku przycisk, który odwołuje się do funkcji Jsa. Moim problemem jest to, że jeśli zrobię to klasycznie to wynik wyświetli się na drugiej stronie a ja natomiast chcę aby wynik funkcji wyświetlił się pod przyciskiem. W specjalnie do tego stworzonym divie, bez przeładowania strony. Z góry zaznaczam, że chciałbym to zrobić w czystym Jsie i jest to dla mnie forma nauki więc poprosiłbym o jak najprostsze wytłumaczenie tego :)
Z góry dziękuję

<div class="zadanie text-center">
<h3>tekst.</h3>
<button type="button" id="but7" onclick="zad21()">Zadanie 2.1</button>
<div id="zad"><p>kappa</p></div>
</div>
<div id="proba"></div>




function zad21(marka,model,kolor,rocznik,pojemnosc,przebieg)
{
	 var marka =this.marka=prompt("Podaj marke") ;
	 var model =this.model=prompt("Podaj model") ;
	 var kolor = this.kolor=prompt("Podaj kolor") ;
	 var rocznik =this.rocznik=prompt("Podaj rocznik");
	 var pojemnosc = this.pojemnosc=prompt("Podaj pojemnosc") ;
	 var przebieg = this.przebieg=prompt("Podaj przebieg") ;
}

 

komentarz 9 stycznia 2017 przez ScriptyChris Mędrzec (190,190 p.)

Moim problemem jest to, że jeśli zrobię to klasycznie to wynik wyświetli się na drugiej stronie

Co masz na myśli, że wynik wyświetla się na drugiej stronie? Możesz pokazać screena? 

Czy funkcja zad21 ma być konstruktorem? Jeśli tak, to:

var marka =this.marka=prompt("Podaj marke") ;

niepotrzebnie tworzysz zmienną, do której przypisujesz tworzone pole. Zapisz po prostu w ten sposób (usuń też spację przed średnikiem):

this.marka = prompt("Podaj marke");

W momencie tworzenia obiektu za pomocą konstruktora - wskaźnik this zostanie automatycznie przypisany do tworzonego obiektu. Tworzenie zmiennych lokalnych ma tutaj sens, gdy chcesz aby jakieś wybrane zmienne i funkcje były prywatne. To co przypiszesz do obiektu przez this będzie widoczne na zewnątrz, czyli będziesz mógł odwołać się do danego pola/metody poprzez zapis typu obiekt.pole / obiekt.metoda()

Analogicznie wszystkie pozostałe pola w konstruktorze z tym zapisem var na początku.

komentarz 9 stycznia 2017 przez vonziu Nowicjusz (120 p.)

Tak wygląda stronka a konkretnie jakiś tam przykład który sobie robię.Tak wygląda strona

Po kliknięciu na np przycisk Zadanie1_for przeskakuje mi na następną stronę

I efekt jest taki.

Chciałbym, żeby efekt skryptu wyświetlał się gdzieś pod przyciskami, w jakimś divie albo coś w tym stylu.

 

komentarz 9 stycznia 2017 przez Kolboch Bywalec (2,320 p.)
komentarz 10 stycznia 2017 przez vonziu Nowicjusz (120 p.)
edycja 10 stycznia 2017 przez vonziu

Na dzień dzisiejszy zarzuciłem próby rozwiązywania zadań i zająłem się nauką dodawania elementów htmla. I tu napotkałem pierwszy problem, mianowicie zrobiłem sobie formularz z dwoma polami i przyciskiem a następnie za pomocą jsa pobieram te dane, tworzę diva i wstawiam dane wpisane w inputach do tego diva. Problem jest taki, że dane się wyświetlają na ułamek sekundy po czym znikają a gdy nacisnę wstecz wszystko się elegancko wyświetla.

<div class = "form">
<form action="#" name="formularz" method="GET">
<input type="text" name="name" placeholder="Imie"><br><br>
<input type="text" name="nazwisko" placeholder="nazwisko"><br><br>
<input type="submit" onClick="proba()" value="Dalej">
</form>






function proba()
{
	var f = document.querySelector("form") ;
	var name = f.name.value ;
	var nazwisko = f.nazwisko.value ;
var frag = document.createDocumentFragment() ;
var p = document.createElement("div") ;
p.appendChild(document.createTextNode("Nazywasz się: "+name+" "+nazwisko)) ;
frag.appendChild(p);

document.body.appendChild(frag) ;
}

tutaj po naciśnięciu przycisku:

 

 

A tutaj jak nacisnę wstecz

komentarz 10 stycznia 2017 przez xmentor Nałogowiec (49,520 p.)

Najprościej będzie zmienić submit na button.

Poczytaj również o: https://developer.mozilla.org/pl/docs/Web/API/Event/preventDefault

komentarz 10 stycznia 2017 przez Malinowski Początkujący (320 p.)
Użycie submit wiąże się z przeładowaniem strony, dlatego jeśli chcesz użyć submit bez przeładowywania, dodałbym w funkcji proba() "return false;" na końcu oraz onClick="return proba()".

1 odpowiedź

0 głosów
odpowiedź 10 stycznia 2017 przez Malinowski Początkujący (320 p.)

Nie jestem pewien czy tworzenie konstruktora ma tu sens, czy nie wystarczyłaby prosta funkcja, taka jak poniżej?

 

function zad21()
{
     let marka = prompt("Podaj marke");
     let model = prompt("Podaj model");
     let kolor = prompt("Podaj kolor");
     let rocznik = prompt("Podaj rocznik");
     let pojemnosc = prompt("Podaj pojemnosc");
     let przebieg = prompt("Podaj przebieg");
  
     document.getElementById("proba").innerHTML = marka + ", " + model + ", " + kolor + ", " + rocznik + ", " + pojemnosc + ", " + przebieg;
}

 

komentarz 10 stycznia 2017 przez surfeliza Stary wyjadacz (11,260 p.)
nieuzasadnione użycie let zamiast var skoro i tak masz wszystko w obrębie funkcji.
komentarz 10 stycznia 2017 przez Malinowski Początkujący (320 p.)
Wydaje mi się, że używanie "let" jest po prostu bezpieczniejsze, dlatego w ogóle nie używam "var" gdy piszę kod. W tym przypadku jest dokładnie tak jak mówisz - w środku funkcji nie ma żadnej różnicy między użyciem "var" czy "let", jednak nie wydaje mi się żeby można było to nazwać nieuzasadnionym użyciem. Ale może się mylę, chętnie posłucham Twoich argumentów ;)
komentarz 10 stycznia 2017 przez vonziu Nowicjusz (120 p.)
Powiem Wam, że zajarałem się trochę manipulowaniem treścią htmla. Za mój następny cel obieram sobie zrobienie w Jsie wysuwanego menu po kliknięciu. Mam pytanie, bo wiem już, że style mogę dowolnie przypisywać do diva, jestem jednak ciekawy jak ma się to do pseudoklas typu hover czy focus. Wybaczcie z góry za takie pytania, jednak dopiero się uczę Jsa, i każda pomoc dla mnie jest na wagę złota :) Bardzo Wam dziękuję za wszystkie dotychczasowe odpowiedzi :)

EDIT: Kolejne pytanie: Czy na przykład jak stworzę element o id np. test i potem w css zapiszę jego wygląd, to czy jest jakaś możliwość, aby ten nowo powstały element mogł zczytać te właściwości z arkusza? Czy tylko w skrypcie zostaje mi ostylowanie tego elementu?
komentarz 10 stycznia 2017 przez ScriptyChris Mędrzec (190,190 p.)

w środku funkcji nie ma żadnej różnicy między użyciem "var" czy "let"

A jednak :)

http://www.2ality.com/2015/02/es6-scoping.html

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let

komentarz 11 stycznia 2017 przez Malinowski Początkujący (320 p.)
Nie bardzo rozumiem o co chodzi w tym komentarzu - jeśli masz funkcję bez żadnych innych elementów blokowych, to wg mnie nie ma żadnej różnicy. Mój komentarz dotyczył wyżej napisanej funkcji, obojętne czy używam var czy let tutaj. Jeśli masz inne elementy blokowe takie jak if czy for, to wtedy jest różnica, ale chyba właśnie dlatego używanie let zamiast var ma większy sens, bo masz wtedy tylko zasięg lokalny.

Nie jestem pewien również jak dywagacje na temat var i let wiążą się z pytaniami użytkownika vonziu - chyba trochę odchodzimy od sedna sprawy, w tym przypadku czy użyję var czy let nie ma najmniejszego znaczenia i nie wiem dlaczego się tym zajmujemy, na razie nikt nie przedstawił jakichś logicznych argumentów ;)
komentarz 11 stycznia 2017 przez Malinowski Początkujący (320 p.)
Za pomocą JSa możesz dodawać/usuwać klasy danego elementu, zapisane w arkuszu stylów - jeśli o to Ci chodziło. Ale ważne jest chyba żeby miało to jakiś sens, bo jeśli możesz coś zrobić poprzez samego css-a (np. wspomniany hover) to warto to zrobić, o ile nie wiąże się to z jakimś mega spadkiem wydajności - ale to tylko moja opinia.
komentarz 12 stycznia 2017 przez ScriptyChris Mędrzec (190,190 p.)

na razie nikt nie przedstawił jakichś logicznych argumentów

Coś niedokładnie przeczytałeś dokumentację:

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let

Przy let występuje coś takiego jak temporal dead zone oraz nie możesz zadeklarować ponownie tej samej zmiennej.

komentarz 12 stycznia 2017 przez Malinowski Początkujący (320 p.)
Jak to się ma do funkcji którą napisałem? Sugerujesz że nie powinno się używać let?
komentarz 12 stycznia 2017 przez surfeliza Stary wyjadacz (11,260 p.)
Temporal dead zone and errors with let (kod numer dwa z linku) ---> sprawdź co zwróci z let, a co z var. Na upartego skoro nie widzisz różnicy to dochodzi jeszcze wsparcie let dla przeglądarek (nie będzie większe od var ).
komentarz 13 stycznia 2017 przez ScriptyChris Mędrzec (190,190 p.)

Sugerujesz że nie powinno się używać let?

Skąd taki wniosek? Ja tylko odniosłem się do Twojej wypowiedzi, że między let a var nie ma żadnej różnicy poza scopem:

jeśli masz funkcję bez żadnych innych elementów blokowych, to wg mnie nie ma żadnej różnicy. Mój komentarz dotyczył wyżej napisanej funkcji, obojętne czy używam var czy let tutaj. 

Różnice są nawet, gdy masz wszystko w jednym scope. Akurat w kodzie Twojej funkcji, na której temat dyskutujemy, nie będzie różnicy. Natomiast, gdyby zechcieć ponownie zadeklarować tą samą zmienną, albo odnieść się do niej za wcześnie, to wtedy zacznie się sypanie błędami :)

Zatem kończąc - w Twoim konkretnym kodzie nie będzie różnicy. Jednak pomiędzy let var są różnice, oprócz wspomnianego zasięgu.

Podobne pytania

+2 głosów
3 odpowiedzi 6,609 wizyt
0 głosów
1 odpowiedź 438 wizyt
0 głosów
1 odpowiedź 855 wizyt
pytanie zadane 24 kwietnia 2019 w JavaScript przez Milo Obywatel (1,180 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...