Applying contrast on the page by means of cookies

Question

Applying contrast on the page by means of cookies

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have a button on an accessibility bar, which when clicked calls the following function:

function contraste2 ()
	{
		var css = document.querySelector('#css');
		var contraste = Cookies.get("contraste");
		if (contraste == "contrasteinativo" || contraste =="undefined")
		{
			Cookies.set("contraste","contrasteativo", { expires: 365 });
			css.setAttribute('href', 'estiloscontraste.css');
		}

		if (contraste == "contrasteativo")
		{
			css.setAttribute('href', 'estilos.css');
			Cookies.set("contraste","contrasteinativo", { expires: 365 });
		}	

	}

The application of the contrast css is by means of an alternative css, called in the function.

But this code is wrong, I know.

If the contrast has not yet been applied (cookie = undefined), then it activates the contrast and sets the cookie to active.

But soon after, it checks to see if the cookie is active, and if it does, it turns off the contrast. That way, it turns out that there is no change in the page (since the cookie will always be inactive).

I am not able to create a logic for this, I thought to make a kind of accountant to check if the button was already clicked, one accountant through another cookie.

javascript html cookies acessibilidade

asked by anonymous 10.08.2018 / 19:15

2 answers

0

Since I'm not aware of where the Cookies object comes from, I'll create an example using the native API sessionStorage :

const button = document.querySelector('#change-contrast');
const link = document.querySelector('#css');

function getContrastState (toggleValue) {
  const state = sessionStorage.getItem('contrast-state');

  if (! state) sessionStorage.setItem('contrast-state', '0');
  if (toggleValue) sessionStorage.setItem('contrast-state', state === '1' ? '0' : '1');

  return sessionStorage.getItem('contrast-state') === '1';
}

function toggleContrast (toggleValue = true) {
  const contrastState = getContrastState(toggleValue);

  if (contrastState) return link.setAttribute('href', 'contraste-ativo');
  link.setAttribute('href', 'contraste-inativo');
}

// Inicializa:
toggleContrast(false);

// Reinicializa ao clicar no botão:
button.addEventListener('click', toggleContrast);

<button id="change-contrast">Alterar Contraste</button>
<a id="css" href="#">...</a>

You will have to test the code on another page, since StackOverflow does not allow code snippets to access the contents of localStorage or sessionStorage .

I've created a CodePen to demonstrate.

Reference:

sessionStorage .

10.08.2018 / 19:48

Display the name of the user logged in by the email and password registered in the firebase in the application Is it possible to connect to a VPN via C # code?

score 0 · Accepted Answer

Change the second if to only execute when the first condition is not reached.

In your code the second if was always evaluated in this version is evaluated only if the first condition is reached.

undefined is not a string so it should not be enclosed in quotation marks.

 function contraste2 ()
    {
        var css = document.querySelector('#css');
        var contraste = Cookies.get("contraste");
        if (contraste == "contrasteinativo" || contraste == undefined)
        {
            Cookies.set("contraste","contrasteativo", { expires: 365 });
            css.setAttribute('href', 'estiloscontraste.css');
        } else if (contraste == "contrasteativo")
        {
            css.setAttribute('href', 'estilos.css');
            Cookies.set("contraste","contrasteinativo", { expires: 365 });
        }   

    }