Develop Reference

How do delete elements from page based on cookie value?

I want to create a button on my webpage, which when clicked, sets a cookie with a specified value. The cookie should be valid for the entire domain, all its directories and sub-domains.
The code I'm using now is this:
function setCookie(cname, cvalue, exdays)
{
var d = new Date();
d.setTime(d.getTime() + (365*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "name1" + cvalue + "value1" + expires + ";path=/";
}
Then, once the cookie and its value is set, I want that button to get deleted from the page. Also, next time the page loads, I want to check if the cookie and the value exists and if not, show the button or else, delete the button.
The button in context has an id: delete
I'm using this code to check for cookie and its value:
function getCookie(name1)
{
var name = name1 + "value1";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++)
{
var c = ca[i];
while (c.charAt(0) == ' ')
{
c = c.substring(1);
}
if (c.indexOf(name) == 0)
{
return c.substring(name.length, c.length);
}
}
return "";
}
I've found these codes from here: https://www.w3schools.com/js/js_cookies.asp
I'm going to use this code to delete the element if the cookie and its value is present:
function removeElement(elementId)
{
var element = document.getElementById(delete);
element.parentNode.removeChild(element);
}
I've taken this code from here: https://www.abeautifulsite.net/adding-and-removing-elements-on-the-fly-using-javascript
I don't know how to link those 2 fuctions to carry out the required action.

Here is a working solution for you. Take a look at the comments inside the Code.
Are u new to JS? in this case you should take a look at codecademy. Its for free and you will learn the basics very fast.
Note that SO does not allow you to check or set cookies. For that reason the runable code below will cause an error. Here is a working fiddle.
if (getCookie('myCookie')) removeElement('myButton'); // remove if cookie is set
if (document.getElementById('myButton')) document.getElementById('myButton').onclick = function() { // bind function to clickevent
setCookie('myCookie', 'myValue', 1); // set cookie
removeElement('myButton'); // remove button
}
function setCookie(cname, cvalue, exdays) { // your setCookie Funktion
var d = new Date();
d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + '=' + cvalue + '; '+ expires + ";path=/"; // reset to w3schools solution
}
function getCookie(name) { // your getCookie Funktion
// removed 'var name = ...' because you wont find your cookie if you changing the name here
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function removeElement(elementId) { // your removeElement Function
var element = document.getElementById(elementId); // variable delete was undefined, if your buttons id was delete you had to write it in ''
element.parentNode.removeChild(element);
}
<button type="button" id="myButton">
click me
</button>

Going by your requirements you just want to delete a specific button if the cookie is present.
In this case you will need to do 2 things.
Call the getCookie and based on the return value call the removeElement at the end of the setCookie method.
Note: I am assuming your setCookie method is synchronous.
Load the button by default and do the same as Step 1 once the page is loaded.
To summarize, your mrthods should look like this:
setCookie method:
function setCookie(cname, cvalue, exdays){
var d = new Date();
d.setTime(d.getTime() + (365*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "name1" + cvalue + "value1" + expires + ";path=/";
if(getCookie(cname)) removeElement('delete');
}
After Loading the document:
document.onload = ()=>{
if(getCookie(cname)) removeElement('delete');
}

Website not getting cookie info correctly and spamming reload

I'm trying to define a version for my website so it can reload the resources if the versions don't match. The problem is that when I fetch the cookie, the cookie value is not returned. The result of this is that the website is in a constant state of reloading.
I made sure that the cookie was there and I tried using my functions in the console and setting the cookie manually.
Webpage:
var version = '1.0.0';
var cVersion = version == getCookie("version");
if(!cVersion) {
setCookie("version", version, 1000);
window.location.reload(true);
}
Cookies Script:
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
The website should reload and update the version number if they are different and do nothing if they are the same.

Cookies disappear after setting them in Microsoft edge

I'm trying to set cookies that are permanent in Microsoft edge. They last only until I close the browser. Yes I have cookies enabled. Here is some code I found from a while ago:
var cookieHandler = {
setCookie : function(name, value, days, time)
{
var expires = "";
if(days)
{
var date = new Date();
date.setTime(date.getTime() + (time || (days * 24 * 60 * 60 * 1000)));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
},
getCookie : function(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++)
{
var c = ca[i];
while(c.charAt(0) == ' ')
{
c = c.substring(1, c.length);
}
if(c.indexOf(nameEQ) == 0)
{
return c.substring(nameEQ.length, c.length);
}
}
return null;
},
eraseCookie : function(name)
{
document.cookie = name + '=; Max-Age=-99999999999;';
}
};
Yeah when I reopen the browser my cookies are gone. Does anyone have working code for cookies in Microsoft edge?
Edit:
I'm using the file:/// origin.

Display popup once per browser session not working

I want to display a popup once in per browser session in a day. So I collect this below script from here. But this script dose bot display anything anytime. Please help me to solved it.
Note: without script popup display well for every page start. But I just want once for my site per browser session.
Cookie script:
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
function checkCookie() {
var user = getCookie("ccname");
if (user != "") {
} else {
$(".socialbox").fadeIn();
$(".smallcontainers").fadeIn()
user = "mysocial";
setCookie("ccname", user, 1);
}
}

Execute javascript only once a week

I've got a question, im very new to javascript but i got this from the internet:
<script>
function lightbox_open(){
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
</script>
But i dont want to spam everyone this popup, so it only has to show 1 time every week on your pc, thought u can do this with a cookie. But im new to it so i cant get it working.
Someone that can help me out?
So if someone opens my page, show the popup. 2nd time he visits there is no popup, after 1 week the popup has to show again.

First create a function to set cookies:
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
Then, a function to get a cookie:
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) != -1) return c.substring(name.length,c.length);
}
return "";
}
and finally, check if cookie is set or else do the work and set the cookie
function checkCookie() {
var lightbox = getCookie("lightbox");
if (lightbox === "") { // Cookie not set
lightbox_open();
setCookie("lightbox", "seen", 7);
}
}

Set a cookie that gets deleted after a week:
document.cookie = 'preventSpam;max-age=604800'; // 7 * 24 * 60 * 60
Then check whether the cookie exists
if (document.cookie) {
showSomePopup();
}
Beware: This is just a simplest possible demonstration. If you want to use cookies for more than this single use-case, you need to implement/import some kind of cookie getter/setter, as shown in documentation.