Create a cookie in javascript

There seems to be an issue with this code snippet:

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
  {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function checkCookie()
{
var username=getCookie("username");
if (username=="username"){
    document.getElementById(mydivx).style.display = 'block';  }else{
    document.getElementById(mydivx).style.display = 'none'; 
  }
}

There's also a button included to define the cookie:

<a href="#" onClick="setCookie('username',username,365); return true">hide</a>

The expected behavior is that when the button is clicked, it sets a cookie named "username" with the value "username", and then retrieves and displays the cookie using the getcookie function.

Can you spot any mistakes in my implementation?

Any assistance would be greatly appreciated!

UPDATE: ISSUE RESOLVED:

To fix the problem, simply remove the ";" from the function call, and ensure to use single quotes in the button code:

hide

Special thanks to stealthyninja for the solution!

Answer №1

To update your HTML code, make the following change:

<a href="#" onClick="setCookie('username', 'username', 365); return false">esconder</a>

It is important to include the return false so that clicking on the link does not trigger the browser to navigate to the specified href, resulting in a hash symbol (#) being displayed in the address bar. Essentially, this prevents the default action of the link click without requiring JavaScript for prevention.


Note:
Ensure that the second occurrence of username is either a variable or a string, as using it by itself will result in an undefined value.

Answer №2

It seems like your setcookie function was never called. You can try the following solution:

<a href="#" onClick="setCookie('username', username, 365); return true">hide</a>

Answer №3

<a href="#" onClick="createCookie('username', username, 365); return true">hide</a>

There seems to be an issue in that code. The onClick attribute and 'username' are not formatted correctly. You should try:

<a href="#" onClick="createCookie('username', 'username', 365);">hide</a>

Answer №4

It seems like this might not be the complete solution, but pay attention to this particular line:

<a href="#" onClick="setCookie("username",username,365); return true">esconder</a>

There is an issue here because you are prematurely ending the string by using double quotes within double quotes; consider trying

<a href="#" onClick="setCookie('username',username,365); return true">esconder</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Jest tutorial: mocking constructor in a sub third-party attribute

Our express application uses a third-party module called winston for logging purposes. const express = require('express'); const app = express(); const { createLogger, transports } = require('winston'); const port = process.env.PORT | ...

Using JQuery to implement a date and time picker requires setting the default time based on the server's PHP settings

I have implemented a jQuery UI datetime picker in my project. As JavaScript runs on the client side, it collects date and time information from the user's machine. Below is the code snippet I am currently using: <script> // Function to set ...

Learn how to dynamically change a class name with JavaScript to alter the color of a navbar icon

I have little experience with javascript, but I want to make a change to my navbar icon. Currently, my navbar has a black background with a white navbar icon. As I scroll the page, the navbar background changes to white and the font color changes to black. ...

Execute a function once all images have finished loading

My current approach involves utilizing a function to load images from an array: for (var i = 0; i < images_list.length; i++) { var img = new Image(); img.onload = function() { images_objects.push(this); ...

Trouble arises when displaying data using AngularJS in an HTML environment

I'm currently facing a challenge understanding where I went wrong in my code. My goal is to display the initial array values in the table data, but so far, I haven't had much success. Here is the HTML section of the code; <body ng-controller ...

Assign an array value to the input based on the selection made in Javascript

After finding a lot of useful information in previous questions, I am struggling to get the last piece that I need. My PHP code helps me loop through form fields and assign unique names to each field using a variable. One of these fields is for "expense ty ...

Transmit form data via Ajax request

Thank you for your interest. I am looking to retrieve $_POST['Division'] from a dropdown list: <select name="Division" onchange="setImage2(this);"> <option value="1">Bronze</option> <option value="2">Silver</op ...

An issue occurred while deploying Docker on Railway services: Build Error

After successfully deploying my Django project on Railway, I decided to add SendGrid mail functionality using the django-sendgrid-v5 package. Everything worked fine in the development environment, including sending emails like user signups. However, when ...

Unable to fetch JSON data from PHP with the help of AJAX

I seem to be encountering an issue with retrieving JSON string data from my PHP script using an AJAX call. Here are the relevant scripts: $.ajax({ type: "POST", async: false, dataType: "json", url: "databas ...

The image fails to display when using THREE.js and Panolens.js

Trying to create a 360-degree environment with informational buttons using THREE.js and Panolens.JS However, I'm unable to resolve why the image is not appearing. Continuously encountering the error: Uncaught ReferenceError: process is not defined. ...

Unable to add items to the global JavaScript array variable

My goal is to populate a global array variable within my ready function, but when I attempt to access the data later on, the array appears to be empty. This is how my ready function looks: var counter = 0; var services = []; var names = [] va ...

Looking to create a pop-up using javascript, css, or jQuery?

When visiting digg.com and clicking the login button, a sleek in-screen popup appears to input user data. I'm curious about the best way to achieve this on my own site. It is built with RoR and includes some Javascript elements. Searching for "javasc ...

Denied from being displayed in a frame due to a violation of the Content Security Policy directive by a parent element

I'm in the process of developing a Salesforce app that is displayed within an iframe on a Salesforce page. I am using a node express server to render this page. In order to ensure security compliance, I want the app to only display within the Salesfor ...

Having trouble enabling push notifications on Android with ngCordova

Having trouble with push notifications through the ngCordova plugin. Followed the sample code from (with a slight change - no deviceready listener, code inside ionicPlatform.ready listener) Below is the code snippet: angular.module('myApp', [& ...

Is it possible to create a multi-page single-page application using Vue js SSR?

It may appear contradictory, but I struggle to find a better way to express it. When using vue server-side rendering, it seems you are limited to single page applications. However, for various reasons, I require an application with multiple real server-s ...

The margin-top property in CSS is not functioning as intended for a specific pixel value when applied to

I'm having trouble with positioning an icon using margin-top: -35px; under #menu. When I click on the icon, the side navigation bar doesn't work properly. However, if I adjust it to -15px, the side navigation bar displays correctly. Can someone h ...

Maintain the modifications in NPM software dependencies

Currently, I am developing a REACT web application and have integrated the react-datasheet library using NPM. To ensure compatibility with IE11, I made modifications to the JavaScript file installed via NPM. While these changes work perfectly on my local m ...

What is the best way to import a JavaScript class into the main.js file of a Vue.js project and make it accessible in all components without needing to import it individually in each component

I have developed JS classes that I want to import into the app.js or main.js file of my vue.js project, so that I can create instances of them in various components. Currently, I find myself having to import the same JS class separately in all components w ...

Show the text from the chosen option using jQuery with a button

Hey everyone, I have a question regarding a coding issue I'm facing. In this problem, I am unable to display the text from the selected option when I click the order button. The desired result is to show the selected option that I choose and display i ...

Is it possible to refresh an iframe with PHP once a certain condition is satisfied?

I have a situation with two pages - one is my PHP script and the other is an HTML page containing two iframes. > <html> > > <iframe name=1></iframe> <iframe name=2></iframe> > > </html> Currently, ifram ...