I know there are similar questions about it but I’ve stumbled on different problem. I have a lots of paragraphs in my page and I want to add “favorite” buttons to every single one of them. So far I’ve attached “favorite” button to one of them and passed it to another page. One more thing… I want to add those favorited paragraphs like a list. Simply I want to make FAVORITES page. This is my first page:
<form action="pages/login_screen.html">
<p id="first">A<span id="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span></p>
<script>
$(window).on('load',function(){
if(localStorage.toggled != "with_toggle"){
$("#heart").html('<i class="fa fa-heart" aria-hidden="true"></i>');
}else{
$("#heart").html('<i class="fa fa-heart-o" aria-hidden="true"></i>');
}
});
$('#heart').toggleClass(localStorage.toggled);
$('#heart').on('click',function(){
if (localStorage.toggled != "with_toggle") {
$("#heart").html('<i class="fa fa-heart-o" aria-hidden="true"></i>');
$('#heart').toggleClass("with_toggle", true);
localStorage.toggled = "with_toggle";
localStorage.removeItem("paragraphValue");
} else {
$("#heart").html('<i class="fa fa-heart" aria-hidden="true"></i>');
$('#heart').toggleClass("with_toggle", false);
localStorage.toggled = "";
var paragraph = document.getElementById("first").innerHTML;
localStorage.setItem("paragraphValue", paragraph);
return false;
}
});
</script>
<button><a href="pages/login_screen.html">GO</a></button>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>
<p>F</p>
<p>G</p>
</form>
And this is my second Page:
<span id="favorites"><!--FAVORITES HERE--></span>
<script>
document.getElementById("favorites").innerHTML = localStorage.getItem("paragraphValue");
</script>