I have an icon that fulfills the function of "add" a string to LocalStorage and another to "remove", what I want to do is make it a single icon, if I press the "add" icon it becomes the "remove" icon or at reverse (if it is in remove it becomes add).
Here is an example of how I want it. IMAGE GIF
function FavId() {
localStorage.setItem("favn1", "<a href='/details/title'><img src='https://images.unsplash.com/photo-1659560893497-bb094425bd21?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1498&q=80'></a>");
}
function Removefav() {
localStorage.removeItem("favn1");
}
body {
background-color: black;
}
i {
font-size: 50px;
color: white;
cursor: pointer;
}
<!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">
<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'>
<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-solid-rounded/css/uicons-solid-rounded.css'>
<title>Fav 1</title>
</head>
<body>
<i onclick="FavId()" class="fi fi-rr-add"></i>
<i onclick="Removefav()" class="fi fi-sr-cross-circle"></i>
</body>
</html>
This way it will work for you, I have tried in the section of adding OS code and there it gives me problems with the issue of
localStorage
, I don't know if testing from files and the browser this will happen, that's why I have that part commented. But at least the part of the buttons that you want works correctly.Basically what I have done is that in the function corresponding to each button I show and hide the other button. And at the time of loading the page the button
remove
does not show it.