const checkedStorage = localStorage.getItem("darkMode");
if (checkedStorage === null) {
localStorage.setItem("darkMode", false)
}
function darkMode() {
if (checkedStorage === true) {
localStorage.setItem("darkMode", false)
} else {
localStorage.setItem("darkMode", true)
}
}
When the value is manually set to false and I press the button to run darkMode(), it will change to true but if it is set to true, it won't change to false. When it is set to null it changes to false, which means if it is true and the function is run shouldnt it work? I am honestly stumped. Any help would be great, thanks!
Because when you fetch data from localStorage using localStorage.getItem it returns a string. So "true" === true is false, that's the reason why the value is not being set to false. For more info about getItem please refer here
Please change the condition to like below
function darkMode() {
if (checkedStorage === "true") {
localStorage.setItem("darkMode", false)
} else {
localStorage.setItem("darkMode", true)
}
}
Hope this helps.
You have remember that value in localstorage is a String and isn't boolean. That's you issue. This code will help u
const checkedStorage = localStorage.getItem("darkMode");
if (checkedStorage === null) {
localStorage.setItem("darkMode", false)
}
function darkMode() {
if (checkedStorage === "true") {
localStorage.setItem("darkMode", false)
} else {
localStorage.setItem("darkMode", true)
}
}
darkMode();
I hope help u. Pdta: Sorry for my english.
Related
These are the javascript functions for my html form, to validate for empty values in "input" elements and "select" elements respectively. The empty_select_check function doesn't work and I'm not sure why, but the empty_value check works for the individual fields. However, it does not work in the empty_value_all() fucntion. Note that the empty_value_all() is called when the user clicks submit.
I get the following error:
Type Error: cannot read property length of undefined for empty_value_check. Any idea why it works for individual fields but not for when i try to submit? Let me know if you require my html code but basically its just input elements with an onkeyup="" where I call the js functions.
function submitform(){
empty_value_all()
$('#Start').click()
}
}
function empty_value_check(ele) {
let value = ele.value;
console.log(value)
if (value === '' || value.length === 0) {
if ($(ele).closest('div').find('small').length != 0)
$(ele).closest('div').find('small').removeClass('hide').removeClass('d-none');
else
$(ele).closest('div').nextAll('small').removeClass('hide').removeClass('d-none');
$(ele).addClass('is-invalid');
}
else {
$(ele).nextAll('small').addClass('hide');
$(ele).removeClass('is-invalid');
}
}
function empty_select_check(ele) {
if (ele.value === "Select Folder" || ele.value === undefined) {
$(ele).addClass('invalid-feedback');
return false
} else {
$(ele).removeClass('is-invalid');
}
}
$(function() {
$('#field_5,#field_6,#field_7').on('change', empty_select_check(this))
})
function empty_value_all() {
$('#field_1,#field_2,#field_3,#field_4').each(empty_value_check(this));
$('#field_5,#field_6,#field_7').each(empty_select_check(this));
return false;
}
$(selector).each(looping_function) expects a function as input, but in the code in question, it is the result of the function that is being passed. Update empty_value_all as below and try,
function empty_value_all() {
$('#field_1,#field_2,#field_3,#field_4').each(function () {
empty_value_check(this);
});
$('#field_5,#field_6,#field_7').each(function () {
empty_select_check(this);
});
//...
}
I'm trying to add conditional statement, so when the user toggle the buttons it would trigger an action, for example output the some text.
I tried to add the conditional as method, and as computed property without success, also I tried with switch statement.
I'll add the codepen link https://codepen.io/manosx/pen/KELmpj?editors=0010
clickedTag: function (indexTag) {
// toggle the active class
this.$set(this.isClickedTag, indexTag, !this.isClickedTag[indexTag])
let tagsSelected = _.keys(_.pickBy(this.isClickedTag, _.identity))
let tagsSelectedSingle = tagsSelected.map(s => `'${s}'`).join(', ')
console.log(tagsSelectedSingle)
if (tagsSelectedSingle === '0') { console.log('naylon') }
else if (tagsSelectedSingle === '1') { console.log('espiga') }
else if (tagsSelectedSingle === '2') { console.log('omega') }
else if (tagsSelectedSingle === '3') { console.log('crochet') }
else if (tagsSelectedSingle === '4') { console.log('thread') }
else if (tagsSelectedSingle === '5') { console.log('bordado') }
},
I would like to add a conditional statement that would trigger different actions depending of the buttons that are on.
Its beter to use indexOf() because includes will not work on some browsers.
Try this.
if (tagsSelectedSingle.indexOf('0')>=0) { console.log('naylon') }
if (tagsSelectedSingle.indexOf('1')>=0) { console.log('espiga') }
if (tagsSelectedSingle.indexOf('2')>=0) { console.log('omega') }
if (tagsSelectedSingle.indexOf('3')>=0) { console.log('crochet') }
if (tagsSelectedSingle.indexOf('4')>=0) { console.log('thread') }
if (tagsSelectedSingle.indexOf('5')>=0) { console.log('bordado') }
I created a js quiz. The questions are stored in a jquery array. However, clicking on next will not proceed to the next array value. How to fix this?
function nextQuestion() {
submt = true;
$('#explanation').empty();
$('#question').append(quiz[currentquestion]['question']).html();
if (quiz[currentquestion].hasOwnProperty('image') && quiz[
currentquestion]['image'] != "") {
if ($('#question-image').length == 0) {
$(document.createElement('img')).addClass(
'question-image').attr('id',
'question-image').attr('name', 'anscho').attr(
'src', quiz[currentquestion]['image']).attr(
'alt', htmlEncode(quiz[currentquestion][
'question'
])).insertAfter('#question');
} else {
$('#question-image').attr('src', quiz[
currentquestion]['image']).attr('alt',
htmlEncode(quiz[currentquestion]['question'])
);
}
} else {
$('#question-image').remove();
}
addChoices(quiz[currentquestion]['choices']);
setupButtons();
}
Solved it. Thanks to Johnny Mopp for pointing out that currentquestion should be incremented. Thanks!!!
I am trying to hide and show certain paper-materials depending on what termiantePlan is. terminatePlan is being passed in from MVC 5 view which is working. Once termiantePlan hits the control statement, its not reading it correctly...the code passes the first if statment because termiantePlan is not null. but once it gets to the second if statement it dosnt read that terminatePlan = "active". Also, If termiantePlan == 'noPlan', i still get this.showTermPlanStatus(terminatedPlan) everytime. I have also tried terminatePlan.indexOf('noPlan') > -1; This doesn't work either.
Polymer({
is: "lithium-terminate-plan",
properties: {
terminatePlan: String
},
observers: [
"termPlan(terminatePlan)"
],
termPlan: function (terminatePlan) {
if (terminatePlan != null || terminatePlan != "active") {
if (terminatePlan == "noPlan") {
this.showTermPlanStatus(noPlanSelected);
} else if (terminatePlan == "error") {
this.showTermPlanStatus(terminatedPlanError);
}
else {
this.showTermPlanStatus(terminatedPlan);
}
} else {
if (this.effectiveDate == null) {
} else {
this.showTermPlanStatus(activePlan);
}
}
},
showTermPlanStatus: function (showTrue) {
this.$.terminatePlanError.hidden = true;
this.$.terminatedPlan.hidden = true;
this.$.noPlanSelected.hidden = true;
this.$.activePlan.hidden = true;
this.$.terminatePlanInProcess.hidden = true;
showTrue.hidden = false;
}
});
I'm trying to turn a button-click into a toggle that enables or disables a function, depending on its state. The function allows the enter key to be used for a form submission.
var enterToggle = true;
function enterToggleListener(elem) {
enterKeyPress();
elem.click(function() {
enterToggle = !enterToggle;
console.log('enter-toggle clicked')
if (enterToggle === false) {
console.log('enter toggle false')
// What do I need to add here to stop 'enterKeyPress()'?
} else {
console.log('enter toggle true')
enterKeyPress();
}
});
}
function enterKeyPress() {
$('#noteText').keypress(function(e){
if(e.which == 13){
$('#noteButton').click();
}
});
}
enterToggleListener($('#toggle-button'));
What I don't understand is how to stop the enterKeyPress() function when enterToggle is false. Any suggestions?
EDIT: Cleaned-up code, with #James Montagne's answer added
var enterToggle = true;
function enterToggleListener(elem) {
elem.click(function() {
enterToggle = !enterToggle;
if (enterToggle === false) {
$('#enter-toggle').text('Enter key saves note (OFF)')
} else {
$('#enter-toggle').text('Enter key saves note (ON)')
}
});
}
function enterKeyPress() {
$('#noteText').keypress(function(e){
if(enterToggle && e.which == 13){
$('#noteButton').click();
}
});
}
enterKeyPress();
enterToggleListener($('#enter-toggle'));
function enterKeyPress() {
$('#noteText').keypress(function(e){
if(enterToggle && e.which == 13){
$('#noteButton').click();
}
});
}
You can simply check the value of the variable within your handler. This way you don't need to keep adding and removing the handler as seems to be your current approach.
However, if you must add and remove for some reason, you would use off.