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

question-closed JavaScript - przekazywanie zmiennej pomiędzy osobnymi plikami

42 Warsaw Coding Academy
0 głosów
2,644 wizyt
pytanie zadane 28 lipca 2018 w JavaScript przez Rozmarynka Użytkownik (830 p.)
zamknięte 28 lipca 2018 przez Rozmarynka

Witam!

Mam dwa osobne pliki JS'a. Chciałabym przesłać zmienną z jednego pliku do drugiego. Każdy plik JS'a jest podpięty od osobny plik HTML. Czy da się to zrobić?

Ogólny zarys pomysłu:
Przerabiam odcinek JS'a pana Mirosława, w którym tworzymy grę "Szubienica". Chciałam dodać osobną stronę tytułową, na której można byłoby wybrać kategorię i wylosować z niej hasło. Losowanie hasła jest w innym pliku JS'a niż "mechanika" gry. Chciałabym wylosowane hasło przekazać do tego pliku JS, w którym obsługuję już "mechanikę" gry.

Szperając po internecie chciałam to zrealizować poprzez takie coś:

document.getElementById("kategorie").innerHTML ='OK - mamy dla Ciebie haslo - <a href="szubienica.html?haslo">Gotowy?</a>';

Ale nie działa :D Wczytuje aktualnie to, co mam w pliku JS z "mechaniką" gry - czyli metoda przekazywania nie działa. Jakieś pomysły? Porady? Wskazówki? Ewentualnie, jak lepiej rozwiązać ten problem?

Strona z kategoriami i losowanie:
 

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	
	<link type="text/css" rel="stylesheet" href="losowanie.css" />
	<script src="losowanie.js"></script>
	
	<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&amp;subset=latin-ext" rel="stylesheet"> 
	
</head>
<body>

	<div id="pojemnik">
		<div id="plansza">WYBIERZ KATEGORIE</div>
		<div id="kategorie">
			<div class="kat" onclick="losuj(1)">SPORT</div>
			<div class="kat" onclick="losuj(2)">MOTORYZACJA</div>
			<div style="clear:both;"></div>
			<div class="kat" onclick="losuj(3)">ELEKTRONIKA</div>
			<div class="kat" onclick="losuj(4)">MUZYKA</div>
			<div style="clear:both;"></div>
			<div class="kat" onclick="losuj(5)">ZDROWIE</div>
			<div class="kat" onclick="losuj(6)">PROGRAMOWANIE</div>
			<div style="clear:both;"></div>
		</div>
	</div>

</body>
</html>
var haslo = "";
//ustawienie mozliwych hasel w losowaniu w zaleznosci od wybranej kategorii;
//kategoria Sport
var sport = new Array(5);
sport[0]="piłka nożna";
sport[1]="piłka ręczna";
sport[2]="bieganie";
sport[3]="kolarstwo";
sport[4]="tennis";
//kategoria motoryzacja
var moto = new Array(5);
moto[0] = "Harley Davidson";
moto[1] = "General Motors";
moto[2] = "Formuła";
moto[3] = "Tesla";
moto[4] = "wyścig";
//kategoria elektronika
var ele = new Array(5);
ele[0] = "zimny lut";
ele[1] = "Arduino";
ele[2] = "dioda";
ele[3] = "płytka prototypowa";
ele[4] = "oprogramowanie";
//kategoria muzyka
var muzyka = new Array(5);
muzyka[0] = "Agnieszka Chylińska";
muzyka[1] = "Alan Silvestri";
muzyka[2] = "Jan Hammer";
muzyka[3] = "saksofon";
muzyka[4] = "instrumenty klawiszowe";
//kategoria zdrowie
var zdrowie = new Array(5);
zdrowie[0] = "zdrowie odżywianie";
zdrowie[1] = "aktywność fizyczna";
zdrowie[2] = "używki";
zdrowie[3] = "sen";
zdrowie[4] = "stres";
//kategoria programowanie
var pro = new Array(5);
pro[0] = "zintegrowane środowisko programistyczne";
pro[1] = "zmienne";
pro[2] = "wskaźnik";
pro[3] = "tablice";
pro[4] = "programowanie obiektowe";

//losowanie 
function losuj(nr_kat)
{
	switch(nr_kat)
	{
		case 1: haslo=sport[Math.floor(Math.random()*5)]; break;
		case 2: haslo=moto[Math.floor(Math.random()*5)]; break;
		case 3: haslo=ele[Math.floor(Math.random()*5)]; break;
		case 4: haslo=muzyka[Math.floor(Math.random()*5)]; break;
		case 5: haslo=zdrowie[Math.floor(Math.random()*5)]; break;
		case 6: haslo=pro[Math.floor(Math.random()*5)]; break;
		
	}

	haslo = haslo.toUpperCase();
	alert(haslo);
	document.getElementById("plansza").innerHTML ="";
	document.getElementById("kategorie").innerHTML ='OK - mamy dla Ciebie haslo - <a href="szubienica.html?haslo">Gotowy?</a>';
}

 

Główny kontent i "mechanika" gry
 

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	
	<link type="text/css" rel="stylesheet" href="style.css" />
	<script src="szubienica.js"></script>
	
	<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&amp;subset=latin-ext" rel="stylesheet"> 
	
</head>
<body>

	<div id="pojemnik">
		<div id="plansza"></div>
		<div id="szubienica">
			<img src="img/s0.jpg">
		</div>
		<div id="alfabet"></div>
		<div style="clear:both;"></div>
	</div>

</body>
</html>
	var haslo="Bez pracy nie ma kołaczy";
	haslo = haslo.toUpperCase();
	
	var dlugosc = haslo.length;
	var haslo1 = "";
	
	for(i=0;i<dlugosc;i++)
	{
		if(haslo.charAt(i) == " ") haslo1 = haslo1 + " ";
		else haslo1 = haslo1 + "-";
	}
	
	var ile_skuch = 0;

	var yes = new Audio("yes.wav");
	var no = new Audio("no.wav");

	var litery = new Array(35);
		
	litery[0] = "A";
	litery[1] = "Ą";
	litery[2] = "B";
	litery[3] = "C";
	litery[4] = "Ć";
	litery[5] = "D";
	litery[6] = "E";
	litery[7] = "Ę";
	litery[8] = "F";
	litery[9] = "G";
	litery[10] = "H";
	litery[11] = "I";
	litery[12] = "J";
	litery[13] = "K";
	litery[14] = "L";
	litery[15] = "Ł";
	litery[16] = "M";
	litery[17] = "N";
	litery[18] = "Ń";
	litery[19] = "O";
	litery[20] = "Ó";
	litery[21] = "P";
	litery[22] = "Q";
	litery[23] = "R";
	litery[24] = "S";
	litery[25] = "Ś";
	litery[26] = "T";
	litery[27] = "U";
	litery[28] = "V";
	litery[29] = "W";
	litery[30] = "X";
	litery[31] = "Y";
	litery[32] = "Z";
	litery[33] = "Ż";
	litery[34] = "Ź";
	
	window.onload = start;


function zmien_haslo()
{
	document.getElementById("plansza").innerHTML = haslo1;
}

function start()
{
	var tresc_diva = "";
	
	for(i=0; i<=34; i++)
	{
		var element = "lit" + i;
		tresc_diva=tresc_diva + '<div class="litera" id="'+element+'" onclick="sprawdz('+i+')">'+litery[i]+'</div>';
		if((i+1)%7==0) tresc_diva = tresc_diva + '<div style="clear:both;"></div>';
	}
	
	document.getElementById("alfabet").innerHTML = tresc_diva;
	
	zmien_haslo();
}

String.prototype.ustawZnak = function(miejsce, znak)
{
	if(miejsce > this.length-1) return this.toString();
	else return this.substr(0,miejsce) + znak + this.substr(miejsce +1);
}

function sprawdz(nr)
{
	
	//flaga
	var trafiona = false;
	
	for(i=0;i<dlugosc;i++)
	{
		if(haslo.charAt(i) == litery[nr])
		{
			haslo1 = haslo1.ustawZnak(i, litery[nr]);
			trafiona = true;
		}
	}
	
	if(trafiona == true)
	{
		var element = "lit" + nr;
		yes.play();
		
		document.getElementById(element).style.background = "#003300";
		document.getElementById(element).style.color = "#00C000";
		document.getElementById(element).style.border = "3px solid #00C000";
		document.getElementById(element).style.cursor = "default";
		
		zmien_haslo();
	}
	else
	{
		ile_skuch++;
		var element = "lit" + nr;
		no.play();
		
		
		document.getElementById(element).style.background = "#330000";
		document.getElementById(element).style.color = "#C00000";
		document.getElementById(element).style.border = "3px solid #C00000";
		document.getElementById(element).style.cursor = "default";
		document.getElementById(element).setAttribute("onclick", ";");
		
		var obraz = "img/s"+ ile_skuch + ".jpg";
		document.getElementById("szubienica").innerHTML = '<img src="'+obraz+'" alt=""/>';
	}
	
	//wygrana
	if(haslo1 == haslo)
	{
		document.getElementById("alfabet").innerHTML = "Brawo!<br /> Odkryto poprawne hasło<br />" + haslo + '<br /><br /><span class="reset" onclick="location.reload()">JESZCZE RAZ?</span>';
	}
	
	//przegrana
	if(ile_skuch>=9)
	{
		document.getElementById("alfabet").innerHTML = "Niestety, nie udało się!!<br /> Poprawne hasło<br />" + haslo + '<br /><br /><span class="reset" onclick="location.reload()">JESZCZE RAZ?</span>';
	}
	
	
}

 

komentarz zamknięcia: Problem rozwiązany

2 odpowiedzi

+2 głosów
odpowiedź 28 lipca 2018 przez Tomek Sochacki Ekspert (227,490 p.)
wybrane 28 lipca 2018 przez Rozmarynka
 
Najlepsza
const value = 'test'; //pobrane np. jakieś textContent z DOM

// Zapisujemy w pamięci:
localStorage.setItem('cachedValued', value);

// i w innym miejscu:
const val = localStorage.getItem('cachedValue');
val; // "test"

To chyba najłatwiejsze rozwiązanie i najszybsze.

komentarz 28 lipca 2018 przez Rozmarynka Użytkownik (830 p.)
Super! Działa fantastycznie! Dziękuję ślicznie :)
+2 głosów
odpowiedź 28 lipca 2018 przez niezalogowany
localStorage lub sessionStorage
komentarz 28 lipca 2018 przez Rozmarynka Użytkownik (830 p.)
Super! Dziękuję ślicznie za odpowiedź :)

Podobne pytania

0 głosów
0 odpowiedzi 1,557 wizyt
pytanie zadane 6 listopada 2018 w JavaScript przez olejniczakbydgoszcz Początkujący (290 p.)
0 głosów
1 odpowiedź 344 wizyt
pytanie zadane 9 stycznia 2020 w PHP przez franz Gaduła (4,940 p.)
0 głosów
1 odpowiedź 195 wizyt

93,385 zapytań

142,384 odpowiedzi

322,540 komentarzy

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

VMware Cloud PRO - przenieś swoją infrastrukturę IT do chmury
...