Contrast application on the page via cookies

Asked

Viewed 72 times

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 contrast css takes place through an alternative css, called in the function.

Only 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 as active.

Only then, it checks if the cookie is active, and if it has it disables the contrast. This way, there is no change in the page (because the cookie will always be inactive).

I’m not able to create a logic for this, I thought of making a kind of counter to check if the button has already been clicked, a counter through another cookie.

javascript html logic cookies accessibility

  • Where does this "Cookies.set" "Cookies.get" api come from"

  • I am thereby including <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script> I have followed the guidelines here: https://github.com/js-cookie/js-cookie

2 answers

1


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

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

The Undefined is not a string so it should not be in quotes.

 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 });
        }   

    }

0

Since I don’t know where the object comes from Cookies, I will 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, as Stackoverflow does not allow code snippets to access the content of localStorage or sessionStorage.

I created a Codepen to demonstrate.

Reference:

Browser other questions tagged javascript html logic cookies accessibility

You are not signed in. Login or sign up in order to post.