TransWikia.com

Mostrar un botón hasta que le haga clic y guardar en localstorage

Stack Overflow en español Asked on January 4, 2021

Quiero hacer que al hacer clic en un input que se muestra al hacer clic en un boton, este (el botón que muestra el input) no se muestre mas, y se guarde en localstorage.
No he encontrado nada al respecto, pero hice lo siguiente:

<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Estrellas</a> // Abre un modal con estrellas  

<p class="clasificacion">
    <input id="radio1" type="radio" name="estrellas" value="1">
    <label for="radio1">★</label>
    <input id="radio2" type="radio" name="estrellas" value="2">
    <label for="radio2">★</label>
    <input id="radio3" type="radio" name="estrellas" value="3">
    <label for="radio3">★</label>
    <input id="radio4" type="radio" name="estrellas" value="4">
    <label for="radio4">★</label>
    <input id="radio5" type="radio" name="estrellas" value="5">
    <label for="radio5">★</label>
  </p>

Entonces, al hacer clic en cualquier estrella, automaticamente deje de mostrarse el boton que dice "Estrellas"

javascript

One Answer

para solucionar este caso realicé lo siguiente:

  1. Agregar un id al botón "estrellas" para poder saber cual es el botón que tengo que ocular
  2. Importar un archivo js en el que ejecutaría el código para "ocultar" el botón en caso dado seleccionen la calificación. Esos 2 pasos se traducirían en el siguiente código:
    <body>
        <a id="startButton" class="waves-effect waves-light btn modal-trigger" href="#modal1">Estrellas</a> // Abre un modal con estrellas  
    
    <p class="clasificacion">
        <input id="radio1" type="radio" name="estrellas" value="1">
        <label for="radio1">★</label>
        <input id="radio2" type="radio" name="estrellas" value="2">
        <label for="radio2">★</label>
        <input id="radio3" type="radio" name="estrellas" value="3">
        <label for="radio3">★</label>
        <input id="radio4" type="radio" name="estrellas" value="4">
        <label for="radio4">★</label>
        <input id="radio5" type="radio" name="estrellas" value="5">
        <label for="radio5">★</label>
      </p>
        
    </body>
    <script src="index.js"></script>

Y el archivo js contendría lo siguiente:

let calificadores = document.getElementsByName("estrellas")
let estrellasButton = document.getElementById("startButton")
//con esto evaluas de que cuando recarguen la pagina el boton siga oculto
if(localStorage.getItem("calificacion")){
    estrellasButton.style.display = "none";
}
//con esto ocultas el boton y guardas el localstorage
let seleccionarCalificacion = function() {
    let calificacion = this.getAttribute("value");
    localStorage.setItem('calificacion', calificacion);
    estrellasButton.style.display = "none";
};
for (let i = 0; i < calificadores.length; i++) {
    calificadores[i].addEventListener('click', seleccionarCalificacion,false);
}

EDIT: para solo ocultar cuando la calificación sea mínimo 3

let calificadores = document.getElementsByName("estrellas")
let mostrarUOcultar = function(){
    let estrellasButton = document.getElementById("startButton")
    let calificacionGuardada = localStorage.getItem("calificacion")
    if(calificacionGuardada>2){
        estrellasButton.style.display = "none";
    }else{
        estrellasButton.style.display = "block";
    }
}    
let seleccionarCalificacion = function() {
    let calificacion = this.getAttribute("value");
    localStorage.setItem('calificacion', calificacion);
    mostrarUOcultar()
};
for (let i = 0; i < calificadores.length; i++) {
    calificadores[i].addEventListener('click', seleccionarCalificacion,false);
}
mostrarUOcultar()

Correct answer by everacosta on January 4, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP