Globalna zmienna JS działająca na podstronach.

pytanie zadane 19 czerwca 2016 w JavaScript przez Kyatt Początkujący (400 p.)

Witam. Wczoraj prosiłem o pomoc przy skrypcie JS i kodzie HTML odnośnie aktywowania samego skryptu. Teraz mam inne pytanie. Mam taki skrypcik:

function wypisz_Trap() {
	
	var nutka1 = document.getElementById("Rate1_Trap").value;
	nutka1 = parseInt(nutka1);
	var nutka2 = document.getElementById("Rate2_Trap").value;
	nutka2 = parseInt(nutka2);
	var nutka3 = document.getElementById("Rate3_Trap").value;
	nutka3 = parseInt(nutka3);
	var nutka4 = document.getElementById("Rate4_Trap").value;
	nutka4 = parseInt(nutka4);
	var nutka5 = document.getElementById("Rate5_Trap").value;
	nutka5 = parseInt(nutka5);
	var nutka6 = document.getElementById("Rate6_Trap").value;
	nutka6 = parseInt(nutka6);
	var nutka7 = document.getElementById("Rate7_Trap").value;
	nutka7 = parseInt(nutka7);
	var nutka8 = document.getElementById("Rate8_Trap").value;
	nutka8 = parseInt(nutka8);
	var nutka9 = document.getElementById("Rate9_Trap").value;
	nutka9 = parseInt(nutka9);
	var nutka10 = document.getElementById("Rate10_Trap").value;
	nutka10 = parseInt(nutka10);
	
	wynik_trap = ((nutka1 + nutka2 + nutka3 + nutka4 + nutka5 + nutka6 + nutka7 + nutka8 + nutka9 + nutka10) / 10);
	
}

function wypisz_Dubstep() {
	
	var nutka1 = document.getElementById("Rate1_Dubstep").value;
	nutka1 = parseInt(nutka1);
	var nutka2 = document.getElementById("Rate2_Dubstep").value;
	nutka2 = parseInt(nutka2);
	var nutka3 = document.getElementById("Rate3_Dubstep").value;
	nutka3 = parseInt(nutka3);
	var nutka4 = document.getElementById("Rate4_Dubstep").value;
	nutka4 = parseInt(nutka4);
	var nutka5 = document.getElementById("Rate5_Dubstep").value;
	nutka5 = parseInt(nutka5);
	var nutka6 = document.getElementById("Rate6_Dubstep").value;
	nutka6 = parseInt(nutka6);
	var nutka7 = document.getElementById("Rate7_Dubstep").value;
	nutka7 = parseInt(nutka7);
	var nutka8 = document.getElementById("Rate8_Dubstep").value;
	nutka8 = parseInt(nutka8);
	var nutka9 = document.getElementById("Rate9_Dubstep").value;
	nutka9 = parseInt(nutka9);
	var nutka10 = document.getElementById("Rate10_Dubstep").value;
	nutka10 = parseInt(nutka10);
	
	wynik_dubstep = ((nutka1 + nutka2 + nutka3 + nutka4 + nutka5 + nutka6 + nutka7 + nutka8 + nutka9 + nutka10) / 10);
	
}

function wypisz_results(){
	
	alert("Your Trap results: " + wynik_trap + " / 10");
	
	alert("Your Dubstep results: " + wynik_dubstep + " / 10");
	
}

Po 1 czy w dobry sposób utworzyłem globalną zmienną? Po 2 jest jakiś sposób by po kliknięciu przycisku komunikat wyświetlał się na kolejnej podstronie albo tej same stronie, gdyż z tym "alertem" nie prezentuje się to najlepiej.

Napisałem coś takiego:

<form><button value="Show me results!" onclick="wypisz_results()" class="rate2" />Show me results!</button></form>
	
		<script type="text/javascript" src="quiz.js"></script>

I niestety nie pokazuje mi wyników, które wprowadziłem, na poprzednich podstronach. Z góry dziękuję za pomoc i pozdrawiam ;)

2 odpowiedzi

odpowiedź 19 czerwca 2016 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 19 czerwca 2016 przez Kyatt

Najlepsza

Po 1 czy w dobry sposób utworzyłem globalną zmienną?

Masz tam dwie zmienne globalne: wynik_trap oraz wynik_dubstep? Możesz zamiast tworzenia ich jako globalne zrobić coś takiego:

function glowna_Funkcja() {
   /*
    *  obie zmienne beda widoczne wewnatrz funkcji "glowna_Funkcja()" i we wszystkim co tutaj zadeklarujesz
    */
   var wypisz_trap;
   var wynik_dubstep;

   function wypisz_Trap() {
     // ...
  }

  function wypisz_Dubstep() {
     //
  }
}

Natomiast kod wewnątrz tych funkcji aż prosi się o skrócenie na coś w takim stylu (traktuj bardziej jako koncepcję, a nie gotowy kod):

function glowna_Funkcja() {

  var wynik_trap = 0;
  var wynik_dubstep = 0;  

  function pobierz_Wartosci_z_Dom(numer) {
    return Number(document.getElementById('Rate' + numer + '_Trap').value);
  }

  function wypisz_Trap() {
    var nutki = 9;

    for (var i = 1; i <= nutki; i++) {
       wynik_trap += pobierz_Wartosci_z_Dom(i);
    }

    wynik_trap /= nutki;
  }

  function wypisz_Dubstep() {
    // podobnie jak w funkcji "wypisz_Trap()"
  }
}

Po 2 jest jakiś sposób by po kliknięciu przycisku komunikat wyświetlał się na kolejnej podstronie albo tej same stronie

Na kolejnej podstronie, czyli po przeładowaniu strony (po kliknięciu w odnośnik)?

Nie. skrypty JavaScript otrzymujesz z serwera za każdym razem od nowa - czyli "tracisz" wszystkie zmienne. Jeśli odświeżysz stronę lub przejdziesz do innej to za każdym razem otrzymujesz od nowa HTML/CSS/JavaScript.

Więc albo trzymaj dane w localStorage lub sessionStorage (chyba to pierwsze lepiej się sprawdzi w Twoim przypadku). Albo baw się w Single Page Application - tutaj musisz korzystać z AJAXa, bo będziesz na każdej podstronie tylko pobierał brakujący content, a nie całą stronę od nowa.

komentarz 19 czerwca 2016 przez Kyatt Początkujący (400 p.)
edycja 19 czerwca 2016 przez Kyatt

Czyli jeśli zrobię tak:

function wypisz_Trap() {
	...

	
	localStorage.wynik_trap = ((nutka1 + nutka2 + nutka3 + nutka4 + nutka5 + nutka6 + nutka7 + nutka8 + nutka9 + nutka10) / 10);
	
}

To przetrzyma mi dane z globalnej zmiennej wynik_trap? Btw. Dziękuję za odpowiedź ;)

P.S. Przetestowane, wszystko działa bez zarzutów ;)

komentarz 19 czerwca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Tak. localStorage przechowuje dane do momentu, gdy ich stamtąd nie usuniesz, albo nie zastąpisz wartości danego klucza (pola obiektu) inną wartością, albo dopóki nie wyczyścisz cache'a przeglądarki.

https://developer.mozilla.org/en-US/docs/Web/API/Storage

W każdym razie nie musisz tworzyć zmiennej jako globalnej (przypisywać jej do obiektu window). Możesz, jak pokazałem, stworzyć funkcję "rodzica", a w nim mieć już tą zmienną jako lokalna i będzie ona widoczna wewnątrz funkcji stworzonych wewnątrz "rodzica".

komentarz 19 czerwca 2016 przez Kyatt Początkujący (400 p.)

Jeszcze jedno pytanko: wszystko działa oprócz jednej rzeczy. Mianowicie zrobiłem coś takiego:

function wypisz_results(){
	
	document.getElementById("wynik_Trap").innerHTML = "Your overall Trap rating is: " + localStorage.wynik_trap + " / 10";
	document.getElementById("wynik_Dubstep").innerHTML = "Your overall Dubstep rating is: " + localStorage.wynik_dubstep + " / 10";
	
}

oraz:

orm><button value="Show me results!" onclick="wypisz_results()" class="rate2" />Show me results!</button></form><br />
		
		<font size="10"><div id="wynik_Trap"></div></font><br />
		
		<font size="10"><div id="wynik_Dubstep"></div></font><br />
	
		<script type="text/javascript" src="quiz.js"></script>

Problem polega na tym, że po przejściu całego quizu i wciśnięciu przycisku "Show me results!" wyniki pojawiają się na ułamek sekundy i od razu znikają.

komentarz 19 czerwca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Są jakieś błędy w konsoli?

W tagu <button> nie musisz wpisywać atrybutu value, bo to co wpiszesz pomiędzy jego tagiem otwierającym i zamykającym będzie widoczne jako napis na przycisku.

Po co tutaj są <br>? On służy do łamania tekstu, a nie przemieszczania tagów do następnej linijki https://www.w3.org/TR/html5/text-level-semantics.html#the-br-element

Po co korzystasz z tego? <font size="10"> Ten tag nie jest zalecany:

https://www.w3.org/TR/html/obsolete.html#non-conforming-features

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font

komentarz 19 czerwca 2016 przez Kyatt Początkujący (400 p.)

Błędów żadnych nie ma. Tego <br> używam by po wyświetleniu: "Your trap rating is: ..." przejść do nowej linii.

komentarz 19 czerwca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Aby elementy umiejscowić w nowej linii, to daj im w CSS display: block;

Pokaż HTML i cały JavaScript.

komentarz 19 czerwca 2016 przez Kyatt Początkujący (400 p.)

<html>
	<head>
		<meta charset="UTF-8">
		<title>Results of EDM Quiz</title>
		<link rel="stylesheet" type="text/css" href="quiz.css">
	</head>

	<body>
	
		<form><button onclick="wypisz_results()" class="rate2" />Show me results!</button></form><br />
		
		<p class="czcionka"><div id="wynik_Trap"></div></p><br />
		
		<div id="wynik_Dubstep"><p class="czcionka"></p></div><br />
	
		<script type="text/javascript" src="quiz.js"></script>
	</body>
</html>

function wypisz_Trap() {
	
	var nutka1 = document.getElementById("Rate1_Trap").value;
	nutka1 = parseInt(nutka1);
	var nutka2 = document.getElementById("Rate2_Trap").value;
	nutka2 = parseInt(nutka2);
	var nutka3 = document.getElementById("Rate3_Trap").value;
	nutka3 = parseInt(nutka3);
	var nutka4 = document.getElementById("Rate4_Trap").value;
	nutka4 = parseInt(nutka4);
	var nutka5 = document.getElementById("Rate5_Trap").value;
	nutka5 = parseInt(nutka5);
	var nutka6 = document.getElementById("Rate6_Trap").value;
	nutka6 = parseInt(nutka6);
	var nutka7 = document.getElementById("Rate7_Trap").value;
	nutka7 = parseInt(nutka7);
	var nutka8 = document.getElementById("Rate8_Trap").value;
	nutka8 = parseInt(nutka8);
	var nutka9 = document.getElementById("Rate9_Trap").value;
	nutka9 = parseInt(nutka9);
	var nutka10 = document.getElementById("Rate10_Trap").value;
	nutka10 = parseInt(nutka10);
	
	localStorage.wynik_trap = ((nutka1 + nutka2 + nutka3 + nutka4 + nutka5 + nutka6 + nutka7 + nutka8 + nutka9 + nutka10) / 10);
	
}

function wypisz_Dubstep() {
	
	var nutka1 = document.getElementById("Rate1_Dubstep").value;
	nutka1 = parseInt(nutka1);
	var nutka2 = document.getElementById("Rate2_Dubstep").value;
	nutka2 = parseInt(nutka2);
	var nutka3 = document.getElementById("Rate3_Dubstep").value;
	nutka3 = parseInt(nutka3);
	var nutka4 = document.getElementById("Rate4_Dubstep").value;
	nutka4 = parseInt(nutka4);
	var nutka5 = document.getElementById("Rate5_Dubstep").value;
	nutka5 = parseInt(nutka5);
	var nutka6 = document.getElementById("Rate6_Dubstep").value;
	nutka6 = parseInt(nutka6);
	var nutka7 = document.getElementById("Rate7_Dubstep").value;
	nutka7 = parseInt(nutka7);
	var nutka8 = document.getElementById("Rate8_Dubstep").value;
	nutka8 = parseInt(nutka8);
	var nutka9 = document.getElementById("Rate9_Dubstep").value;
	nutka9 = parseInt(nutka9);
	var nutka10 = document.getElementById("Rate10_Dubstep").value;
	nutka10 = parseInt(nutka10);
	
	localStorage.wynik_dubstep = ((nutka1 + nutka2 + nutka3 + nutka4 + nutka5 + nutka6 + nutka7 + nutka8 + nutka9 + nutka10) / 10);
	
}

function wypisz_results(){
	
	document.getElementById("wynik_Trap").innerHTML = "Your overall Trap rating is: " + localStorage.wynik_trap + " / 10";
	document.getElementById("wynik_Dubstep").innerHTML = "Your overall Dubstep rating is: " + localStorage.wynik_dubstep + " / 10";
	
}

komentarz 19 czerwca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Usuń tag <form> i wyniki nie będą znikać.

odpowiedź 19 czerwca 2016 przez xmentor Nałogowiec (49,520 p.)

Tak jak @Krzycho92 napisał, kod się prosi o jego skrócenie, więc możesz np. dla wszystkich pól do oceny piosenek trap nadać klase "trap" i użyć document.querySelectorAll:

function trap(){
   var inputs = document.querySelectorAll(".trap");
   var suma = 0;
   for(var i=0;i<inputs.length;i++){
      suma+=parseInt(inputs[i].value);
   }
   /* //obliczanie średniej arytmetycznej
   var srednia = suma/inputs.length;
  */
   return alert(suma); // lub return alert(srednia); 
}

Ten alert tylko do testowania.