Good morning everyone, I have been working on this all night and I need some assistance. I am trying to use JavaScript to dynamically change a log in button's color when I log in to my site. It seems that my code not only breaks the button when logged in, but has no effect on the background color of the button at all. Here is the code including the button:
As you can see, the "btnSignIn" calls the signin() method when clicked. Here is the javascript file I have:
var validUser;
function init() {
var loginCookie = loginWithCookie();
if(loginCookie === true) {
validUser = true;
document.getElementById("btnSignIn").outerHTML = "Sign out";
document.getElementById("btnSignIn").style.backgroundColor = "pink";
document.getElementById("results").innnerHTML = "Welcome " + user +"!";
document.getElementById("txtUserName").style.visibility = "hidden";
document.getElementById("txtPassword").style.visibility = "hidden";
}
else {
validUser = false;
}
}
function signin() {
if (document.getElementById("btnSignIn").innerHTML == "Sign out") {
validUser = false;
document.getElementById("btnSignIn").innerHTML = "Sign in";
document.getElementById("btnSignIn").style.backgroundColor = "orange";
document.getElementById("results").innerHTML = "Welcome stranger";
document.getElementById("txtUserName").style.visibility = "visible";
document.getElementById("txtPassword").style.visibility = "visible";
setCookie("txtUserName", null, "txtPassword", null, 365);
}
else {
var user = document.getElementById("txtUserName").value;
var pwd = document.getElementById("txtPassword").value;
if (user.text === "" && user === null &&
pwd.text === "" && pwd === null) {
validUser = false;
}
else if (user === "john#me.com" && pwd === "snow") {
validUser = true;
document.getElementById("btnSignIn").style.backgroundColor = "pink";
document.getElementById("btnSignIn").outerHTML = "Sign out";
document.getElementById("results").innerHTML = "Welcome "+ user + "!";
document.getElementById("txtUserName").style.visibility = "hidden";
document.getElementById("txtPassword").style.visibility = "hidden";
var myCookie = setCookie("txtUserName", user, "txtPassword", pwd, 365);
if (!myCookie) {
validUser = false;
}
}
return false;
}
}
function setCookie(uname, uvalue, pname, pvalue, exdays) {
var cookieEnabled = (navigator.cookieEnabled) ? true : false;
if (cookieEnabled === true) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toUTCString();
document.cookie = uname + "=" + uvalue + "; " + expires;
document.cookie = pname + "=" + pvalue + "; " + expires;
return true;
}
else {
return false;
}
}
function loginWithCookie() {
var cookieEnabled = (navigator.cookieEnabled) ? true : false;
if (cookieEnabled === true) {
var user = getCookie("username");
if (user !== "") {
return user;
}else {
return false;
}
}
else {
return false;
}
}
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 "";
}
<ul class="nav navbar-nav navbar-right">
<li>
<form id="loginform" class="navbar-form navbar-right">
<div class="form-group">
<input type="text" id="txtUserName" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" id="txtPassword" placeholder="Password" class="form-control">
</div>
<button type="submit" id="btnSignIn" class="btn btn-warning" onclick="signin();" >Sign in</button>
</form>
</li>
</ul>
The goal is, when I log in, it will say 'sign out' instead of 'sign in' and it will turn pink in the background. Right now, it signs in okay but it only says 'sign out' in white letters, with no button capability and no background color change.
You're using outerHTML to set the text of #btnSignIn which replaces the node with just text, since all you provided was text. That removes the #btnSignIn element that you applied the background to. Use innerHTML instead.
You're also missing #results in this demo.
Note, I added return false to an inline onsubmit handler for the form, just for this demo so you can see the state of the button after submitting. You'll probably want to remove that in your actual code.
var validUser;
function init() {
var loginCookie = loginWithCookie();
if (loginCookie === true) {
validUser = true;
document.getElementById("btnSignIn").innerHTML = "Sign out";
document.getElementById("btnSignIn").style.backgroundColor = "pink";
document.getElementById("results").innnerHTML = "Welcome " + user + "!";
document.getElementById("txtUserName").style.visibility = "hidden";
document.getElementById("txtPassword").style.visibility = "hidden";
} else {
validUser = false;
}
}
function signin() {
if (document.getElementById("btnSignIn").innerHTML == "Sign out") {
validUser = false;
document.getElementById("btnSignIn").innerHTML = "Sign in";
document.getElementById("btnSignIn").style.backgroundColor = "orange";
document.getElementById("results").innerHTML = "Welcome stranger";
document.getElementById("txtUserName").style.visibility = "visible";
document.getElementById("txtPassword").style.visibility = "visible";
setCookie("txtUserName", null, "txtPassword", null, 365);
} else {
var user = document.getElementById("txtUserName").value;
var pwd = document.getElementById("txtPassword").value;
if (user.text === "" && user === null &&
pwd.text === "" && pwd === null) {
validUser = false;
} else if (user === "john#me.com" && pwd === "snow") {
validUser = true;
document.getElementById("btnSignIn").style.backgroundColor = "pink";
document.getElementById("btnSignIn").innerHTML = "Sign out";
document.getElementById("results").innerHTML = "Welcome " + user + "!";
document.getElementById("txtUserName").style.visibility = "hidden";
document.getElementById("txtPassword").style.visibility = "hidden";
var myCookie = setCookie("txtUserName", user, "txtPassword", pwd, 365);
if (!myCookie) {
validUser = false;
}
}
return false;
}
}
function setCookie(uname, uvalue, pname, pvalue, exdays) {
var cookieEnabled = (navigator.cookieEnabled) ? true : false;
if (cookieEnabled === true) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = uname + "=" + uvalue + "; " + expires;
document.cookie = pname + "=" + pvalue + "; " + expires;
return true;
} else {
return false;
}
}
function loginWithCookie() {
var cookieEnabled = (navigator.cookieEnabled) ? true : false;
if (cookieEnabled === true) {
var user = getCookie("username");
if (user !== "") {
return user;
} else {
return false;
}
} else {
return false;
}
}
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 "";
}
<ul class="nav navbar-nav navbar-right">
<li>
<form id="loginform" class="navbar-form navbar-right" onsubmit="return false;">
<div class="form-group">
<input type="text" id="txtUserName" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" id="txtPassword" placeholder="Password" class="form-control">
</div>
<button type="submit" id="btnSignIn" class="btn btn-warning" onclick="signin();">Sign in</button>
</form>
<div id="results"></div>
</li>
</ul>
You messed up with replacing the text.
Try to use innerHTML, cause you have text inside the tag.
So inside init() it goes like this:
document.getElementById("btnSignIn").outerHTML = "Sign out";
document.getElementById("btnSignIn").style.backgroundColor = "pink";
Yes, as Michael Coker answer, the problem was replacing the whole html element wit the "sign out" text.
I just wanted to add that that example code must be just for testing dinamicaly dom changes, if you wanna practice login/validation DONT ever do that. I mean, the validation logic.
Related
I'm trying to create a html form button that disable after being clicked and will be enable after 24hrs.
The button should work for each users.
How can I fix that?
<p>
<input type='submit' value='Submit' id='btClickMe'
onclick='save(); this.disabled = true;' />
</p>
<p id="msg"></p>
<script>
function save() {
var msg = document.getElementById('msg');
msg.innerHTML = 'Data submitted and the button disabled in 24hrs ☺';
}
</script>
store clicked identifier to cookie which expired after 24 hours from first button clicked (using document.cookie)
<input
type="submit"
value="Submit"
id="btClickMe"
/>
<div id="msg">Message Here</div>
const btn = document.getElementById("btClickMe");
let get = getCookie("clicked"); // check cookie after page loaded
if (get) {
btn.disabled = true; // disable the button after page loaded
}
btn.addEventListener("click", function (_event) {
get = getCookie("clicked"); // check cookie exist
if (!get) setCookie("clicked", "true", 1); // set cookie after clicked
btn.disabled = true; // disable the button after button clicked
var msg = document.getElementById("msg");
msg.innerHTML = "Data submitted and the button disabled in 24hrs ☺";
});
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(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;
}
See Demo
Cookie value's does not change after one or two changes or when refreshing the page
it is being used to change the mode (night-light) of a website.
thanks for helping...
window.onload = function (){
changeMode();
}
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
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 "";
}
function changeMode() {
var user=getCookie("user");
if (user != "") {
if(user == "light"){
dark();
setCookie("user", "dark", 30);
}else if(user == "dark"){
light();
setCookie("user", "light", 30);
}
} else {
user = "light";
if (user != "" && user != null) {
setCookie("user", user, 30);
light();
}
}
}
the file:
https://kurddoblaj.com/mode.js
the Result:
https://kurddoblaj.com
I could find what's wrong with my code and miss understanding about how to work with cookies the first problem is I must add another function to remember the browser yes I did something like that but I was changing the mode after refreshing it was because I had had change mode function inside the onload function... the second mistake was I thought that the cookies can be updated if we before the expiration date but it does not so I removed the expiration date to be updated and set again...
you are free to use my script anywhere, thanks for helping....
the code:
window.onload = function (){
rememberMode();
}
function setCookie(cname,cvalue) {
document.cookie = cname + "=" + cvalue;
}
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 "";
}
function rememberMode() {
var user=getCookie("user");
if (user != "") {
if(user == "dark"){
dark();
}else if(user == "light"){
light();
}
} else {
setCookie("user", "light");
light();
}
}
function changeMode() {
var user=getCookie("user");
if(user == "light"){
dark();
setCookie("user", "dark");
}else if(user == "dark"){
light();
setCookie("user", "light");
}
}
function dark() {
document.getElementById("2").style.backgroundColor = "#171717";
document.getElementById("h2").style.color = "#F1F1F1";
document.getElementById("imod").src = "https://kurddoblaj.com/sun.gif";
document.getElementById("search-box").style.backgroundColor = "#2A2A2A";
document.getElementById("search").style.backgroundColor = "#2A2A2A";
document.getElementById("search").style.color = "white";
document.getElementById("z").style.color = "#595959";
document.body.style.backgroundColor = "#171717";
var elems = document.getElementsByClassName('post');
for(var i = 0; i < elems.length; i++) {
elems[i].style.backgroundColor = "#2A2A2A";
elems[i].style.color = "#F1F1F1";
}
}
function light() {
document.getElementById("2").style.backgroundColor = "#E3E3E3";
document.getElementById("h2").style.color = "black";
document.getElementById("imod").src = "https://kurddoblaj.com/moon.gif";
document.getElementById("search-box").style.backgroundColor = "white";
document.getElementById("search").style.backgroundColor = "white";
document.getElementById("search").style.color = "black";
document.getElementById("z").style.color = "black";
document.body.style.backgroundColor = "#E3E3E3";
var elems = document.getElementsByClassName('post');
for(var i = 0; i < elems.length; i++) {
elems[i].style.backgroundColor = "white";
elems[i].style.color = "black";
}
}
So I need a way to grab the values of the fields from a form that uses contact form 7 plugin, using the Additional Settings box on the admin page.
Some way to set a cookie with the field values would be great.
The form:
<label>Please type your question</label>
<fieldset class="question">
[textarea your-message id:questionmessage]
</fieldset>
<label>Name</label>
<fieldset class="name">
[text* your-name id:questionname]
</fieldset>
<label>Email</label>
<fieldset class="email">
[email* your-email id:questionemail]
</fieldset>
<label>[Submit button]</label>
<fieldset class="submit">
[submit "Send"]
</fieldset>
Additional Settings, that works so far:
on_sent_ok: "location.replace('page2');"
I've tried:
on_sent_ok: "setcookie('form-email',1,strtotime('+30 days'),COOKIEPATH, COOKIE_DOMAIN,false, false);setcookie('form-name',1,strtotime('+30 days'),COOKIEPATH, COOKIE_DOMAIN,false, false);location.replace('page2');"
this still sends the email correctly, but does not redirect to page2 (I know this should just set the cookie values to 1)
To Redirect properly contact form 7 please add this code.
on_sent_ok: "location = 'http://example.com/';"
Remember start double commas(") -> single commas(') -> double commas(") otherwise there will be error
I've called in the additional settings box in the admin area.
on_sent_ok: "setCookiesAndRedirect("http://www.redirecthere.com");"
Then in the form area I've added some javascript to handle the form field values/cookie stuff. This probably isn't great but it works.
< script type = "text/javascript" >
window.onload = function() {
var namefield = document.getElementById("formfullname");
var emailfield = document.getElementById("formemail");
var firstnamefield = document.getElementById("formfirstname");
var surnamefield = document.getElementById("formsurname");
var namecookie = getCookie("form-fullname");
var emailcookie = getCookie("form-email");
var firstnamecookie = getCookie("form-firstname");
var surnamecookie = getCookie("form-surname");
if (namecookie != "" && namefield != null) {
namefield.value = namecookie;
}
if (emailcookie != "" && emailfield != null) {
emailfield.value = emailcookie;
}
if (firstnamecookie != "" && firstnamefield != null) {
firstnamefield.value = firstnamecookie;
}
if (surnamecookie != "" && surnamefield != null) {
surnamefield.value = surnamecookie;
}
} //end load function
function setCookiesAndRedirect(url) {
var namefield = document.getElementById("formfullname");
var emailfield = document.getElementById("formemail");
var firstnamefield = document.getElementById("formfirstname");
var surnamefield = document.getElementById("formsurname");
if (namefield != null)
setCookie("form-fullname", namefield.value, 30);
if (emailfield != null)
setCookie("form-email", emailfield.value, 30);
if (firstnamefield != null)
setCookie("form-firstname", firstnamefield.value, 30);
if (surnamefield != null)
setCookie("form-surname", surnamefield.value, 30);
location.replace(url);
} //end setCookiesAndRedirect
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=/";
} //end setCookies
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 "";
} </script>
<p>First Name (required)<br />
[text* Firstname id:formfirstname] </p>
<p>Last Name (required)<br />
[text* LastName id:formsurname] </p>
<p>Your Email (required)<br />
[email* your-email id:formemail] </p>
<p>[submit "Download Now"]</p>
Some links that helped me:
cookies in all pages
Cookies in javascript
I'm trying to make a form in which, when the user fills out all fields, the output results in a compilation of all of their entered data. The form connects to a php file and it runs just fine, however when I tried to add validation the submit acts strangely.
Basically my "Validation" is made of multiple if statements with one else. The title and content validation are in perfect working order,but when it comes to the type it submits the form anyway.
Any suggestions?
HTML Code:
<body>
<form id="documentationForm" action="testingPHP2.php" method="post">
<figcaption>
<p><strong>Instructions:</strong>
</p>
<p><i>Fill out the information as needed below. Place each step on a new line. When you are finished,<br>submit the document and download the file.</p></i>
</figcaption>
<strong>Title:</strong>
<input id="docTitle" type="text" name="docTitle"><span id="errorTitle"></span>
<br>
<strong>Type:</strong>
<select id="docType" onchange="adaptiveLabel()" name="docType">
<br>
<option value="" selected>Select Document Type</option>
<option value="Procedure">Procedure</option>
<option value="Instruction">Instruction</option>
<option value="Form">Form</option>
</select><span id="errorType"></span>
<br>
<script>
function adaptiveLabel() {
var chosenType = document.getElementById("docType");
var chosenTypeVal = chosenType.value;
var x = document.getElementById("contentLabel");
if (chosenTypeVal == "Procedure") {
x.innerHTML = "Procedural Steps:";
}
if (chosenTypeVal == "Instruction") {
x.innerHTML = "Steps:"
}
if (chosenTypeVal == "Form") {
x.innerHTML = "Form Parts:";
}
if (chosenTypeVal == " ") {
x.innerHTML = " ";
}
}
function submitInputs() {
var errorTitletext = document.getElementById("docTitle");
var errorTitleLable = document.getElementById("errorTitle");
var errorContenttext = document.getElementById("docInput");
var errorContentLabel = document.getElementById("errorContent");
var errorTypetext = document.getElementById("docType");
var errorTypetextLable = document.getElementById("errorType");
if (errorTypetext.value === "") {
alert("You must select a type");
errorTypetextLable.innerHTML = "*Please select a type";
errorTypetextLable.style.color = "red";
}
if (errorTypetext.value === "Procedure" || errorTypetext.value === "Form" || errorTypetext.value === "Instruction") {
errorTypetextLable.innerHTML = "";
errorTypetextLable.style.color = "";
}
if (errorTitletext.value.length === 0 || errorTitletext.value === " ") {
alert("You must create a title");
errorTitleLable.innerHTML = "*Please create a title";
errorTitleLable.style.color = "red";
}
if (errorTitletext.value.length > 0) {
errorTitleLable.innerHTML = "";
errorTitleLable.style.color = "";
}
if (errorContenttext.value.length === 0) {
alert("You must enter content");
errorContentLabel.innerHTML = "*Please enter content";
errorContentLabel.style.color = "red";
}
if (errorContenttext.value.length > 0) {
errorContentLabel.innerHTML = "";
errorContentLabel.style.color = "";
} else {
document.getElementById("documentationForm").submit();
}
}
</script>
<strong><span id="contentLabel"></span><span id="errorContent"></span></strong>
<br>
<textarea style="width: 500px; height: 250px;" id="docInput" name="docInput"></textarea>
<br>
<input type="button" onclick="submitInputs()" value="Create Document">
<input type="submit" value="Default Submit">
</form>
</body>
You should submit the form only if all the values are valid, so use a flag as given below. Also it will be easier to use if...else construct to handle invalid & valid case of a field.
In you logic the problem is irrespective of the first 2 fields valid state, if the content is valid the form's submit is called.
function submitInputs() {
var errorTitletext = document.getElementById("docTitle");
var errorTitleLable = document.getElementById("errorTitle");
var errorContenttext = document.getElementById("docInput");
var errorContentLabel = document.getElementById("errorContent");
var errorTypetext = document.getElementById("docType");
var errorTypetextLable = document.getElementById("errorType");
var valid = true;
if (errorTypetext.value === "") {
alert("You must select a type");
errorTypetextLable.innerHTML = "*Please select a type";
errorTypetextLable.style.color = "red";
valid = false;
} else {
errorTypetextLable.innerHTML = "";
errorTypetextLable.style.color = "";
}
if (errorTitletext.value.length === 0 || errorTitletext.value === " ") {
alert("You must create a title");
errorTitleLable.innerHTML = "*Please create a title";
errorTitleLable.style.color = "red";
valid = false;
} else {
errorTitleLable.innerHTML = "";
errorTitleLable.style.color = "";
}
if (errorContenttext.value.length === 0) {
alert("You must enter content");
errorContentLabel.innerHTML = "*Please enter content";
errorContentLabel.style.color = "red";
valid = false;
} else {
errorContentLabel.innerHTML = "";
errorContentLabel.style.color = "";
}
if (valid) {
document.getElementById("documentationForm").submit();
}
}
Demo: Fiddle
Also There is no need to have a default submit button, you can have only one button like
<form id="documentationForm" action="testingPHP2.php" method="post" onsubmit="return submitInputs();">
.....
<input type="submit" value="Create Document" />
</form>
then
function submitInputs() {
var errorTitletext = document.getElementById("docTitle");
var errorTitleLable = document.getElementById("errorTitle");
var errorContenttext = document.getElementById("docInput");
var errorContentLabel = document.getElementById("errorContent");
var errorTypetext = document.getElementById("docType");
var errorTypetextLable = document.getElementById("errorType");
var valid = true;
if (errorTypetext.value === "") {
alert("You must select a type");
errorTypetextLable.innerHTML = "*Please select a type";
errorTypetextLable.style.color = "red";
valid = false;
} else {
errorTypetextLable.innerHTML = "";
errorTypetextLable.style.color = "";
}
if (errorTitletext.value.length === 0 || errorTitletext.value === " ") {
alert("You must create a title");
errorTitleLable.innerHTML = "*Please create a title";
errorTitleLable.style.color = "red";
valid = false;
} else {
errorTitleLable.innerHTML = "";
errorTitleLable.style.color = "";
}
if (errorContenttext.value.length === 0) {
alert("You must enter content");
errorContentLabel.innerHTML = "*Please enter content";
errorContentLabel.style.color = "red";
valid = false;
} else {
errorContentLabel.innerHTML = "";
errorContentLabel.style.color = "";
}
return valid;
}
Demo: Fiddle
Am working with Cookies for the first time.. Have included the jquery cookie script.. Am looking to have these toggle-btns apply a site-wide background-color change that is maintained from page to page.
The toggle btns html looks like this:
<div class="btn-group btn-group-xs" data-toggle="buttons">
<label class="btn btn-default lightBtn">
<input type="radio" name="options" id="light"> Light
</label>
<label class="btn btn-default darkBtn">
<input type="radio" name="options" id="dark"> Dark
</label>
</div>
And the working JQuery looks like this:
$('.lightBtn').click( function() {
var color = "white";
$("body").removeClass("black").addClass(color);
$(".modal-content").removeClass("black").addClass(color);
$(".dropdown-menu").removeClass("black").addClass(color);
});
$('.darkBtn').click( function() {
var color = "black";
$("body").removeClass("white").addClass(color);
$(".modal-content").removeClass("white").addClass(color);
$(".dropdown-menu").removeClass("white").addClass(color);
});
});
But the cookie code that I iterated on from another stack post looks like this:
$( function() {
$('.lightBtn').click( function() {
var color = "white";
$("body").removeClass("black").addClass(color);
$(".modal-content").removeClass("black").addClass(color);
$(".dropdown-menu").removeClass("black").addClass(color);
createCookie("color", color);
return false;
});
$('.darkBtn').click( function() {
var color = "black";
$("body").removeClass("white").addClass(color);
$(".modal-content").removeClass("white").addClass(color);
$(".dropdown-menu").removeClass("white").addClass(color);
createCookie("color", color);
return false;
});
if (readCookie("color") != null && readCookie("color") != "white") {
$("body").removeClass("black").addClass(readCookie("color"));
$(".modal-content").removeClass("black").addClass(readCookie("color"));
$(".dropdown-menu").removeClass("black").addClass(readCookie("color"));
}
else if {
if (readCookie("color") != null && readCookie("color") != "black") {
$("body").removeClass("white").addClass(readCookie("color"));
$(".modal-content").removeClass("white").addClass(readCookie("color"));
$(".dropdown-menu").removeClass("white").addClass(readCookie("color"));
}
else {
$("body").removeClass("black").addClass("white");
$(".modal-content").removeClass("black").addClass("white");
$(".dropdown-menu").removeClass("black").addClass("white");
}
});
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(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;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
You can try this, This is refactored code
var cookieColor = readCookie("color");
var removeColor = "";
if(cookieColor == null){
cookieColor = "white";
removeColor = "black";
} else if(cookieColor != 'white'){
removeColor = "black";
} else if(cookieColor != 'black'){
removeColor = "white";
}
$("body").removeClass(removeColor).addClass(cookieColor);
$(".modal-content").removeClass(removeColor).addClass(cookieColor);
$(".dropdown-menu").removeClass(removeColor).addClass(cookieColor);