Switch Color

[Angel96]

Salut!

Am un script, si nu stiu cum sa fac o chestie la el.

<script type='text/javascript'>
    function changeBack()
    {
        var back = document.getElementById('colorPicker').value;    
        document.getElementById('content_box').style.background = back ;
    }    
      </script> 

<select id="colorPicker" onchange="JavaScript:changeBack()">
    <option value="transparent">None</option>
    <option value="yellow">Yellow</option>
    <option value="salmon">Salmon</option>
    <option value="lightblue">Light Blue</option>
    <option value="limegreen">Lime Green</option>
    <option value="cyan">Cyan</option>
    <option value="violet">Violet</option>
    <option value="red">Red</option>
</select>

Unde scrie content_box acolo este ID a unui block sau a oricui DIV.

Scriptul consta din aceea ca sa skimbe culoarea unui block sau a unui DIV cu elementul ID

Scriptul merge bine, cind imi aleg culoarea respectiva pe care o doresc se skimba, dar nu se salveaza sa fie tot aceeasi culoare pe care am aleso.

Ca sa intelegeti mai bine, de exemplu: Vrea ca blockul respectiv pe care lam ales sa fie de culoarea Violet, dupa ce miam ales culoarea, blockul sa skimbat in Violet, si iata acum si problema mea apare pe care doresc sa o rezolv. Dupa ce miam schimbat culoarea blockului dau un restart la pagina si culoarea numai este, se schimba in cea default. Eu doresc ca dupa ce miam ales culoarea respectiva tot ea sa ramina, pina nu voi dori sa chimb alta culoare.

Sper ca mati inteles ce deresc.

Edited May 3, 2019 by Angel96

[theandruala]

Din ce am inteles, tu vrei ca schimbarea sa îți rămâna Constanța. Deci trebuie sa stochezi ceea ce vrei tu undeva. Folosind js, cam orice fsci persista pana la refresh. Încearcă sa stochezi în cookie, și sa iei de acolo când intri pe pagina. 

[Angel96]

4 hours ago, theandruala said:

Din ce am inteles, tu vrei ca schimbarea sa îți rămâna Constanța. Deci trebuie sa stochezi ceea ce vrei tu undeva. Folosind js, cam orice fsci persista pana la refresh. Încearcă sa stochezi în cookie, și sa iei de acolo când intri pe pagina. 

da asta doresc, dar nustiu cum sa stochez in cookie...

[aelius]

21 minutes ago, Angel96 said:

da asta doresc, dar nustiu cum sa stochez in cookie...

https://github.com/js-cookie/js-cookie

 

[Angel96]

6 minutes ago, aelius said:

https://github.com/js-cookie/js-cookie

 

si ce trebuie sa fac mai departe, ca nu stiu?

[aelius]

19 minutes ago, Angel96 said:

si ce trebuie sa fac mai departe, ca nu stiu?

Sa citesti readme?

[Angel96]

32 minutes ago, aelius said:

Sa citesti readme?

nimik nu am inteles ce scrie acolo

[theandruala]

31 minutes ago, Angel96 said:

nimik nu am inteles ce scrie acolo

Daca tu nu intelegi asta:

 

Create a cookie, valid across the entire site:

Cookies.set('name', 'value');

Create a cookie that expires 7 days from now, valid across the entire site:

Cookies.set('name', 'value', { expires: 7 });

Create an expiring cookie, valid to the path of the current page:

Cookies.set('name', 'value', { expires: 7, path: '' });

Atunci e o problema f mare, nu vreau sa fiu heitar, dar pune in plm mana si ruleaza alea sa vezi ce se intampla.

[Angel96]

eu nu inteleg cum sa leg scriptul meu cu cookie, si ce fac cu mapa care am descarcat-o de aici:

https://github.com/js-cookie/js-cookie

trebuie sa o urc pe host?

[Angel96]

ma ajuta cineva?

[yoyois]

36 minutes ago, Angel96 said:

ma ajuta cineva?

Nu prea cred ca te ajuta nimeni. Daca tu nu esti in stare sa citesti un readme sau sa scrii un 

<script src="/path/to/js.cookie.js"></script>

ce kk de proiect vrei sa faci tu acolo?

Dai copy paste la tot ce prinzi de pe stackoverflow si dupa te plangi ca nu merge si sa-ti rezolvam noi?

 

Nu asa se face treaba. Pune mana si invata lucruri mai simple intai, si dupa faci "scripturi" deastea.

 

Bafta!

 

https://www.w3schools.com/html/

https://www.w3schools.com/js/default.asp

[Angel96]

eu am venit dupa ajutor, sa ma ajute cineva cum sa il fac... 

[gaddafi]

41 minutes ago, Angel96 said:

ma ajuta cineva?

[Angel96]

3 hours ago, Gecko said:

Nu ai nevoie de libs pentru cookies. Foloseste localStorage care vine by default in toate browserele recente.

 

Cand alegi culoarea, o retii prin localStorage:

localStorage.setItem('myColor', 'culoarea aici');

Cand incarci pagina, verifici daca a fost salvata anterior in localStorage, astfel:

var color = localStorage.getItem('myColor') || '#fff';

#fff va fi culoarea default daca n-a fost setat. Daca a fost setat, vei avea culoarea in "color". Pe baza variabilei o aplici pe div sau unde vrei tu.

nu mi sa primit nimic, posibil nu am facut cum trebuie.

[c3m3d3]

6 hours ago, Angel96 said:

nu mi sa primit nimic, posibil nu am facut cum trebuie.

Cum ai făcut?
Încearcă ca imediat după ce s-a încărcat pagina să verifici dacă variabila din localStorage propusă de Gecko, conține culoare. Asta deoarece funcția ta este apelată doar atunci când alegi ceva din acel select, nu și când se-ncarcă pagina, prin urmare culoarea nu are cum să fie schimbată.

Funcția changeBack ar trebui să arate în felul următor:

const changeBack = () => {
  	  // Aici luamm o culoare
	  let back = document.getElementById('colorPicker').value;
  	  // Aici stocam culoarea in localStorage sub denumirea 'myColor'
  	  localStorage.setItem('myColor', String(back));
  	  // Aici setăm culoarea unui element cu valoarea aleasă
      document.getElementById('content_box').style.background = back;
}

Până în acest punct ceea ce ai făcut a fost că ai stocat o culoare în LocalStorage, mai departe trebuie să iei culoarea respectivă după ce s-a încărcat pagina și să o setezi pe un element. Pentru asta, poți de exemplu să asculți event-ul onLoad pe <body>. Ex: <body onload="functiaMea()" 
Iar functiaMea() poate să fie ceva de acest gen:

const functiaMea = () => { 
	// Aici iau culoarea precedenta din localStorage, iar dacă una precedenta nu există se va returna codul pentru culoarea albă
	const culoareaPrecedenta = localStorage.getItem('myColor') || '#fff';

	// Aici schimb culoarea 
	document.getElementById('content_box').style.background = culoareaPrecedenta
}

Ca și bonus:
Am să asum că ești începător, și mă gândesc că modul în care Gecko verifică culoarea precedentă te pune în confuzie și ți se pare criptic, mă refer la: 
 

const culoareaPrecedenta = localStorage.getItem('myColor') || '#fff';

Aici pornește de la faptul că funcția getItem() ce aparține de LocalStorage, returnează false sau true în funcție de dacă a găsit cheia respectiva ( 'myColor' ) sau nu. Mai departe, pe baza acestui lucru poți face diferite verificări. @Gecko a ales să se folosească de modul în care expresiile sunt evaluate în JavaScript, și să folosit de operatorul OR ( || ) ca să scrie asta mai pe surt.

Ca să-ți faci o idee, expresia de mai sus se poate scrie și sub forma:
 

let culoareaPrecedenta = null;

if( localStorage.getItem('myColor') === true ) {
	culoareaPrecedenta = localStorage.getItem('myColor');
} else {
  return '#fff' 
}

// În JavaScript condițiile din if sunt toate "transformate" în booleans ( true or false ) prin urmare dacă dorești să verifici dacă ceva e adevarat, poți să renunti la " === true ",
// iar if statement-ul tău poate să fie și în modul:
if( localStorage.getItem('myColor') ) { // do stuff } 

Totuși e cam lunguiața, deci o variantă mai scurtă ar fi folosind shorthand if statements aka așa:

// În prima fază verifici dacă există o culoare, în a 2-a fază dacă există o returnezi, dacă nu returnezi culoarea albă
let culoareaPrecedenta = localStorage.getItem('myColor') === true ? localStorage.getItem('myColor') : '#fff';

// Totuși, ții minte ce am spus mai sus legat de evaluarea expresiilor? Ea poate să fie scrisă și mai scurt așa:
let culoareaPrecedenta = localStorage.getItem('myColor') ? localStorage.getItem('myColor') : '#fff';

Știind aceste lucruri, poți să te folosești de modul în care expresiile din stânga și dreapta operatoriilor sunt evaluate și să ajungi la varianta originală care este una scurtă. În cazul operatorului OR ( || ) condițile din stânga și dreapta lui sunt evaluate la True sau False.
Și la nivel fundamental, la executare o să ajungi să ai ceva de acest gen:
 

let color = localStorage.getItem('myColor') || '#fff';

// Aici e posibil ca funcția getItem să returneze False, by default în JavaScript orice String este evaluat ca și True.
// Prin urmare dacă culoarea ta nu este găsită se va ajunge la ceva de genul:

let color = false || "#fff"

// Mai departe, având în vedere că operatorul OR păstrează doar condițiile adevărate ( TRUE ), iar string-urile sunt TRUE, se va ajunge la:

let color = "#fff";

Iar dacă ar fi ca localStorage să conțina o valoare adevărată,  atunci s-ar ajunge la true || true, iar având în vedere că în JavaScript expresiile sunt executate de la stânga la dreapta, se va păstra ce este în partea stângă a operatorului.

În acest mod, poți face tot felul de chestii cu operatori, să zicem că dacă dorești ca atunci când nu există o culoare precedentă, să nu faci nimic. Ei bine poți să te folosești de operatorul AND ( && ) pentru asta și să faci ceva de genul:

let color = localStorage.getItem('myColor') && localStorage.getItem('myColor');

 

Prin treaba de mai sus, color o să fie setat 'undefined' în functie de dacă există sau nu o culoare setată înainte

Poți să-mi scrii dacă ai nevoie cu ajutor legat de JavaScript în general.

Spor! 

 

Edited May 5, 2019 by c3m3d3

[Angel96]

4 hours ago, c3m3d3 said:

Cum ai făcut?
Încearcă ca imediat după ce s-a încărcat pagina să verifici dacă variabila din localStorage propusă de Gecko, conține culoare. Asta deoarece funcția ta este apelată doar atunci când alegi ceva din acel select, nu și când se-ncarcă pagina, prin urmare culoarea nu are cum să fie schimbată.

Funcția changeBack ar trebui să arate în felul următor:

const changeBack = () => {
  	  // Aici luamm o culoare
	  let back = document.getElementById('colorPicker').value;
  	  // Aici stocam culoarea in localStorage sub denumirea 'myColor'
  	  localStorage.setItem('myColor', String(back));
  	  // Aici setăm culoarea unui element cu valoarea aleasă
      document.getElementById('content_box').style.background = back;
}

Până în acest punct ceea ce ai făcut a fost că ai stocat o culoare în LocalStorage, mai departe trebuie să iei culoarea respectivă după ce s-a încărcat pagina și să o setezi pe un element. Pentru asta, poți de exemplu să asculți event-ul onLoad pe <body>. Ex: <body onload="functiaMea()" 
Iar functiaMea() poate să fie ceva de acest gen:

const functiaMea = () => { 
	// Aici iau culoarea precedenta din localStorage, iar dacă una precedenta nu există se va returna codul pentru culoarea albă
	const culoareaPrecedenta = localStorage.getItem('myColor') || '#fff';

	// Aici schimb culoarea 
	document.getElementById('content_box').style.background = culoareaPrecedenta
}

Ca și bonus:
Am să asum că ești începător, și mă gândesc că modul în care Gecko verifică culoarea precedentă te pune în confuzie și ți se pare criptic, mă refer la: 
 

const culoareaPrecedenta = localStorage.getItem('myColor') || '#fff';

Aici pornește de la faptul că funcția getItem() ce aparține de LocalStorage, returnează false sau true în funcție de dacă a găsit cheia respectiva ( 'myColor' ) sau nu. Mai departe, pe baza acestui lucru poți face diferite verificări. @Gecko a ales să se folosească de modul în care expresiile sunt evaluate în JavaScript, și să folosit de operatorul OR ( || ) ca să scrie asta mai pe surt.

Ca să-ți faci o idee, expresia de mai sus se poate scrie și sub forma:
 

let culoareaPrecedenta = null;

if( localStorage.getItem('myColor') === true ) {
	culoareaPrecedenta = localStorage.getItem('myColor');
} else {
  return '#fff' 
}

// În JavaScript condițiile din if sunt toate "transformate" în booleans ( true or false ) prin urmare dacă dorești să verifici dacă ceva e adevarat, poți să renunti la " === true ",
// iar if statement-ul tău poate să fie și în modul:
if( localStorage.getItem('myColor') ) { // do stuff } 

Totuși e cam lunguiața, deci o variantă mai scurtă ar fi folosind shorthand if statements aka așa:

// În prima fază verifici dacă există o culoare, în a 2-a fază dacă există o returnezi, dacă nu returnezi culoarea albă
let culoareaPrecedenta = localStorage.getItem('myColor') === true ? localStorage.getItem('myColor') : '#fff';

// Totuși, ții minte ce am spus mai sus legat de evaluarea expresiilor? Ea poate să fie scrisă și mai scurt așa:
let culoareaPrecedenta = localStorage.getItem('myColor') ? localStorage.getItem('myColor') : '#fff';

Știind aceste lucruri, poți să te folosești de modul în care expresiile din stânga și dreapta operatoriilor sunt evaluate și să ajungi la varianta originală care este una scurtă. În cazul operatorului OR ( || ) condițile din stânga și dreapta lui sunt evaluate la True sau False.
Și la nivel fundamental, la executare o să ajungi să ai ceva de acest gen:
 

let color = localStorage.getItem('myColor') || '#fff';

// Aici e posibil ca funcția getItem să returneze False, by default în JavaScript orice String este evaluat ca și True.
// Prin urmare dacă culoarea ta nu este găsită se va ajunge la ceva de genul:

let color = false || "#fff"

// Mai departe, având în vedere că operatorul OR păstrează doar condițiile adevărate ( TRUE ), iar string-urile sunt TRUE, se va ajunge la:

let color = "#fff";

Iar dacă ar fi ca localStorage să conțina o valoare adevărată,  atunci s-ar ajunge la true || true, iar având în vedere că în JavaScript expresiile sunt executate de la stânga la dreapta, se va păstra ce este în partea stângă a operatorului.

În acest mod, poți face tot felul de chestii cu operatori, să zicem că dacă dorești ca atunci când nu există o culoare precedentă, să nu faci nimic. Ei bine poți să te folosești de operatorul AND ( && ) pentru asta și să faci ceva de genul:

let color = localStorage.getItem('myColor') && localStorage.getItem('myColor');

 

Prin treaba de mai sus, color o să fie setat 'undefined' în functie de dacă există sau nu o culoare setată înainte

Poți să-mi scrii dacă ai nevoie cu ajutor legat de JavaScript în general.

Spor! 

 

Totusi nu ramine Constanta dupa restart al paginei.

[c3m3d3]

4 hours ago, Angel96 said:

Totusi nu ramine Constanta dupa restart al paginei.

Dacă folosești Chrome, în Developer Tools poti vedea acolo ce ai în Local Storage. Apasă F12, apoi du-te la tab-ul Application, iar în stânga o să-ți apară "Storage". Sub Storage o să ai Local Storage cu mai multe site-uri, caută site-ul tău și deschide-l. Mai departe de acolo ai să vezi toate cheiile și valoriile din LocalStorage setate de respectivul site, în cazul tău trebuie să apară ceva cu cheia "MyColor" și o anumită valoare. Rămâi cu consola deschisă atunci când schimbi culoarea și vezi dacă se adaugă ceva acolo sau nu. 

[spider]

@c3m3d3, nici la scoala nu-l invata cum i-ai explicat mai sus, iar lake asta, nici macar un mersi nu se oboseste sa-ti zica..

 

[Angel96]

2 hours ago, c3m3d3 said:

Dacă folosești Chrome, în Developer Tools poti vedea acolo ce ai în Local Storage. Apasă F12, apoi du-te la tab-ul Application, iar în stânga o să-ți apară "Storage". Sub Storage o să ai Local Storage cu mai multe site-uri, caută site-ul tău și deschide-l. Mai departe de acolo ai să vezi toate cheiile și valoriile din LocalStorage setate de respectivul site, în cazul tău trebuie să apară ceva cu cheia "MyColor" și o anumită valoare. Rămâi cu consola deschisă atunci când schimbi culoarea și vezi dacă se adaugă ceva acolo sau nu. 

 

 

[c3m3d3]

Perfect! Până în acest punct ai reușit să salvezi culoarea aleasă în LocalStorage. Valoarea aia o să rămână acolo și după refresh. Acum tot ce ai de făcut este să accesezi respectiva valoare după ce pagină s-a încărcat.

Repet, ca să accesezi ceva din localStorage folosești:
 

localStorage.getItem('numeCheie');

Partea asta de mai sus îți caută cheia respectivă în localStorage.  Și îți returnează ce a găsit în ea. Mai departe, este cam irelevant dacă ți-o returnează și tu nu o stochezi nicăieri, deci o pui într-o variabilă în modul ăsta.
 

let culoareaMea = localStorage.getItem('myColor');

Acum, variabila culoareaMea conține valoarea pentru cheia myColor din localStorage.  Ce trebuie să faci mai departe este ca atunci când pagina s-a încărcat, să setezi culoarea pentru respectivul div cu valoarea din culoareaMea.

Văd că folosești ceva CMS și mă gândesc că HTML-ul este generat din mai multe părți și poate nu vrei să te complici să vezi de unde e generat, așa că în acest context poți să te folosești de un alt event listener.

Sunt două mari event-uri în JavaScript ce sunt emise în momentul în care se încarcă o pagină și anume: DOMContentLoaded și load.
- DomContentLoaded este emis imediat ce DOM-ul a fost încarcat ( Doar HTML-ul fără CSS și imagini )
- load este emis după ce totul a fost încărcat ( DOM / CSS / Imagini )

În cazul tău, load este event-ul pe care trebuie să-l "asculți" deoarece tu modifici CSS. Iar treaba asta o faci în felul următor:
 

<script>
// Aici așteptăm eventul de 'load' ca să știm când s-a încărcat pagina
window.addEventListener("load", function(){
  
  const culoareaPrecedenta = String( localStorage.getItem('myColor') || '#fff' );
  // Aici iau culoarea precedentă din localStorage
  // De asemenea o transform în String ca să nu fie probleme
  
  document.getElementById('content_box').style.background = culoareaPrecedenta;
   // Aici schimb culoarea actuală cu ce avem în localStorage

});
</script>

Pune treaba asta la sfârșitul paginii


 

Edited May 5, 2019 by c3m3d3
Concatnare string complet

[Angel96]

3 hours ago, c3m3d3 said:

Perfect! Până în acest punct ai reușit să salvezi culoarea aleasă în LocalStorage. Valoarea aia o să rămână acolo și după refresh. Acum tot ce ai de făcut este să accesezi respectiva valoare după ce pagină s-a încărcat.

Repet, ca să accesezi ceva din localStorage folosești:
 

localStorage.getItem('numeCheie');

Partea asta de mai sus îți caută cheia respectivă în localStorage.  Și îți returnează ce a găsit în ea. Mai departe, este cam irelevant dacă ți-o returnează și tu nu o stochezi nicăieri, deci o pui într-o variabilă în modul ăsta.
 

let culoareaMea = localStorage.getItem('myColor');

Acum, variabila culoareaMea conține valoarea pentru cheia myColor din localStorage.  Ce trebuie să faci mai departe este ca atunci când pagina s-a încărcat, să setezi culoarea pentru respectivul div cu valoarea din culoareaMea.

Văd că folosești ceva CMS și mă gândesc că HTML-ul este generat din mai multe părți și poate nu vrei să te complici să vezi de unde e generat, așa că în acest context poți să te folosești de un alt event listener.

Sunt două mari event-uri în JavaScript ce sunt emise în momentul în care se încarcă o pagină și anume: DOMContentLoaded și load.
- DomContentLoaded este emis imediat ce DOM-ul a fost încarcat ( Doar HTML-ul fără CSS și imagini )
- load este emis după ce totul a fost încărcat ( DOM / CSS / Imagini )

În cazul tău, load este event-ul pe care trebuie să-l "asculți" deoarece tu modifici CSS. Iar treaba asta o faci în felul următor:
 

<script>
// Aici așteptăm eventul de 'load' ca să știm când s-a încărcat pagina
window.addEventListener("load", function(){
  
  const culoareaPrecedenta = String( localStorage.getItem('myColor') || '#fff' );
  // Aici iau culoarea precedentă din localStorage
  // De asemenea o transform în String ca să nu fie probleme
  
  document.getElementById('content_box').style.background = culoareaPrecedenta;
   // Aici schimb culoarea actuală cu ce avem în localStorage

});
</script>

Pune treaba asta la sfârșitul paginii


 

Mersi mai ajutat mult, totul merge perfect!

[Angel96]

a mai aparut ceva le tema aceasta:

<select id="colorPicker" onchange="JavaScript:changeBack()">
    <option value="transparent">None</option>
    <option value="yellow">Yellow</option>
    <option value="salmon">Salmon</option>
    <option value="lightblue">Light Blue</option>
    <option value="limegreen">Lime Green</option>
    <option value="cyan">Cyan</option>
    <option value="violet">Violet</option>
    <option value="red">Red</option>
</select>

Se poate de facut ca sa fie butoane din coduri html, ca sa pot sa le editez sa le dau un stil oarecare...?

Ca sa intelegeti mai bine ce am vrut, mai jos va las un exemplu.

 

 

[Angel96]

Up, cineva?

[Fi8sVrs]

Nu-i mai puneti alb, il derutati 

#800080

[rajputaman04]

Dai copy paste la tot ce prinzi de pe stackoverflow si dupa te plangi ca nu merge si sa-ti rezolvam noi?