1

Con el id "modoimg" puedo cambiar entre 2 imágenes, si doy clic se coloca la imagen "blanco" y si doy clic de nuevo se coloca la imagen "negro" y funciona, pero me gustaría saber como podría conservar el cambio aun despues de recargar la pagina, gracias.

No lo hice con botones porque estoy probando con varias opciones pero si es mas fácil o en algo arregla que se haga con botones no hay problema

<a href="ejempli.html" id="" title="Modo contraste" onclick="change();">   

<img src="blanco.png" alt="" id="modoimg" > 
var image_tracker = 'b'; 

function change(){
  var image = document.getElementById('modoimg'); 
  if(image_tracker=='b'){
     image.src='negro.png';
     image_tracker='n';
  }else{
     image.src = 'blanco.png';
     image_tracker='b';
  }
}
1
  • 2
    Mírate lo del localStorage. Creo que por ahi van los tiros de lo que preguntas.
    – masterguru
    Commented el 4 ene. 2022 a las 15:23

2 respuestas 2

2

Deberías utilizar localStorage acontinuación muestro posible solución.

<a href="ejempli.html" id="" title="Modo contraste" onclick="change();"> 
<img src="blanco.png" alt="" id="modoimg" > 
var image_tracker = 'b'; 

function change(){
  var image = document.getElementById('modoimg'); 
  if(image_tracker=='b'){
    image.src='negro.png';
    image_tracker='n';
    localStorage.setItem("image_tracer", "b");
  }else{
    image.src = 'blanco.png';
    image_tracker='b';
    localStorage.setItem("image_tracer", "n");
  }
}




window.onload=function(){
    if(localStorage.getItem("image_tracer")!=null){
       item_image_tracer = localStorage.getItem("image_tracer");
       var image = document.getElementById('modoimg');
       if(image_tracker==item_image_tracer){
          image.src='negro.png';
          image_tracker='n';  
       }else{
          image.src = 'blanco.png';
          image_tracker='b';
       }
    }
}
1

Podrías probar algo así:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <img  alt="" id="modoimg"> 
    <script src="app.js"></script>
</body>
</html>

JavaScript (archivo a parte app.js en el mismo lugar que el index.html)

//Capturo imagen para cambiarla y para utilizar el evento click.
const image = document.getElementById("modoimg");

//Deposito si existe algo en localStorage en la variable image_tracker
let image_tracker = localStorage.getItem("image_tracker");


//En este bloque le decimos que hacer cuando se refresca o carga la página por primera vez.
  //Si no hay nada en image_tracker, pongo la imagen en blanco y agrego la "b" al localStorage
if (!image_tracker) {
  console.log("Entré por primera vez");
  localStorage.setItem("image_tracker", "b");
  image.src = "blanco.jpg";
} else {
  //Si existe algo, o sea no es la primera vez que carga el sitio, pone el color que le corresponde en base a lo guardado en localStorage
  if (image_tracker === "b") {
    image.src = "blanco.jpg";
  } else {
    image.src = "negro.jpg";
  }
}

//Escuchamos el evento click sobre la imágen, al presionarlo hacemos el toggle del valor en localStorage y mostramos la imagen correspondiente
image.addEventListener("click", function () {
  image_tracker = localStorage.getItem("image_tracker");
  if (image_tracker === "b") {
    localStorage.setItem("image_tracker", "n");
    image.src = "negro.jpg";
  } else if (image_tracker === "n") {
    localStorage.setItem("image_tracker", "b");
    image.src = "blanco.jpg";
  }
});

Ya que el valor es guardado en localStorage, si se carga por primera vez el sitio por defecto se pondrá en blanco, pero si ya se cargó anteriormente y se cambió el color, quedará guardado en el pc a no ser que se borra el localStorage. De esa forma recordamos que tenía seleccionado el usuario.

Espero sirva, quedo a las órdenes.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.