Tengo un botón y con este botón, estoy tratando de llamar a dos funciones pero, en cambio, parecen cancelarse entre sí.
En la consola muestra esto, los he numerado y conectado a la función, por ejemplo, la línea 1 proviene de la consola. Inicie sesión en la función "addValue".
línea 1 - ['Nombre: graphqless Descripción: REST y GraphQ... URL: https://github.com/tylerbuchea/graphqless']
línea 2 - []
línea - 3 RepoList.js?5216:74 ['Nombre: graphqless Descripción: REST y GraphQ... URL: https://github.com/tylerbuchea/graphqless'] Localstorage está vacío.
El resultado deseado es el siguiente cuando hago clic en el botón, se debe llamar a la función uno y solo después de hacer clic nuevamente se debe llamar a la función 2.
el valor es una cadena
Las funciones
const favs = JSON.parse(localStorage.getItem('name') || []); function addValue(e) { if (e.target.value !== "") { if (!favs.includes(e.target.value)) { favs.push(e.target.value); localStorage.setItem("name", JSON.stringify(favs)); //line 1 console.log(favs); document.getElementById("favsarray").innerHTML = favs } } } //Check if value is in the array, if it then remove the value from both the array and localstorage f unction removeValue(e, value) { if (e.target.value !== "") { //delete from array favs.pop(e.target.value); //line 2 console.log(favs); //change the div text document.getElementById("favsarray").innerHTML = favs; //get the values from localstorage- parse const stored = JSON.parse(localStorage.getItem("name")); //delete the value delete stored[(value, e.target.value)]; //store the new array as a string localStorage.setItem("name", JSON.stringify(favs)); //line 3 console.log(stored); } }Así es como estoy llamando a la función.
onClick={(e)=> {addValue(e); removeValue(e);}}Debe agregar lógica para determinar el estado. De alguna manera, necesita un booleano para saber en qué estado se encuentra. Entonces, cambia una variable booleana o agrega una clase.
usando un booleano
function doAdd(elem) { console.log("add called", elem); } function doRemove(elem) { console.log("remove called", elem); } let actionSate = false; function doAction(e) { const elem = e.currentTarget; actionSate = !actionSate; if (actionSate) { doAdd(elem); } else { doRemove(elem); } } <button type="button" onclick="doAction(event)">Click</button>El uso de una clase le permite tener más de un disparador. Cada uno puede trabajar por sí mismo.
function doAdd(elem) { console.log("add called", elem); } function doRemove(elem) { console.log("remove called", elem); } function doAction(e) { const elem = e.currentTarget; elem.classList.toggle("action"); if (elem.classList.contains("action")) { doAdd(elem); } else { doRemove(elem); } } .action { color: blue; } <button type="button" onclick="doAction(event)">Click 1</button> <button type="button" onclick="doAction(event)">Click 2</button>