We Keep Coding

Can you use decrement/increment operator but skip 0 in JavaScript just like how continue works?

I have here a number counter code where it has increment and decrement buttons. Whenever you click a button, it does its job of incrementing and decrementing the value of the input.
// =number_counter
function decrement(e) {
const btn = e.target.parentNode.parentElement.querySelector(
'button[data-action="decrement"]'
);
const target = btn.nextElementSibling;
let value = Number(target.value);
value--;
target.value = value;
toggleRowClass(btn, value, ["bg-red-200", "item-returned"]);
}
function increment(e) {
const btn = e.target.parentNode.parentElement.querySelector(
'button[data-action="decrement"]'
);
const target = btn.nextElementSibling;
let value = Number(target.value);
value++;
target.value = value;
toggleRowClass(btn, value, ["bg-red-200", "item-returned"]);
}
const decrementButtons = document.querySelectorAll(
`button[data-action="decrement"]`
);
const incrementButtons = document.querySelectorAll(
`button[data-action="increment"]`
);
decrementButtons.forEach(btn => {
btn.addEventListener("click", decrement);
});
incrementButtons.forEach(btn => {
btn.addEventListener("click", increment);
});
This time, I wanted to skip 0 when clicking the buttons having the input value as either -1 or 1. Can I add a behavior such as continue; without the loop and just having increment/decrement operators?

Continue does't exist outside of the loops. The simplest solution for you is to add a condition inside increment/decrement where you would check if the current value is -1/1 and add additional logic in those cases :)

The solution was just to set the value = 1 or value = -1;
function decrement(e) {
const btn = e.target.parentNode.parentElement.querySelector(
'button[data-action="decrement"]'
);
const target = btn.nextElementSibling;
let value = Number(target.value);
value--;
if (value == 0) {
value = -1;
target.value = value;
} else {
target.value = value;
}
toggleRowClass(btn, value, ["bg-red-200", "item-returned"]);
}
function increment(e) {
const btn = e.target.parentNode.parentElement.querySelector(
'button[data-action="decrement"]'
);
const target = btn.nextElementSibling;
let value = Number(target.value);
value++;
if (value == 0) {
value = 1;
target.value = value;
} else {
target.value = value;
}
toggleRowClass(btn, value, ["bg-red-200", "item-returned"]);
}
Sorry I have missed it.

How to filter dropdown list in angular md-option when scope value is changing

I have a dropdown menu using with the data array
data = [{type:"day", value:"daily"}
,{type:"hour", value:"hourly"}
,{type:"month", value:"monthly"}]
and also i have flag in my environment variable as
enableHourly = "true"
enableDaily = "true"
enableMonthly = "true"
by setting one of the value in false
the value should be change like
if enableHourly = "false"
in the md-options select should only display day and month
this is what i try but it seems its not working atm.
self.timeExecutionList = () => {
// check if hourly, daily, weekly, monthly tag is true or false string then remove to
// the array
if (self.beebotCreate) {
var arr = self.timeTypeList;
for( var i = 0, n = arr.length; i < n; i++){
if (arr[i].includes('hr') && self.beebotRunHourly !== "true") {
arr.splice(i, 1);
}
if (arr[i].type === 'day' && self.beebotRunTimeOfDay !== "true") {
arr.splice(i, 1);
}
if (arr[i].type === 'week' && self.beebotRunMonthly !== "true") {
arr.splice(i, 1);
}
if (arr[i].type === 'month' && self.beebotRunMonthly !== "true") {
arr.splice(i, 1);
}
i--
}
return arr
}
if you have cleaner solution would be appreaciated

I feel you could add the boolean value to the data field with default settings and make use of the boolean variable to populate the dropdown. slicing array is expensive.
data = [{type:"day", value:"daily", "enabled" : true}
,{type:"hour", value:"hourly","enabled" : true}
,{type:"month", value:"monthly", "enabled" : true}]
In html, for all options, if the flag is set to true, add it to dropdown else not. Hope that helps
<md-select>
<div ng-repeat="type in data" >
<md-option *ngIf="type.enabled" ng-value="{{value}}">
{{type.value}}
</md-option>
</div>
</md-select>`

jQuery autocomplete strange behavior

I've got an issue with jQuery's autocomplete. What I am trying to do is show a suggestions list based on input. So, for instance, on input class="font" I want to have a list of font sizes and on input class="color" to have a list of color predictions.
Here is what I have:
function suggestions(input, element) {
var suggestions = [];
if (element.hasClass("color") !== -1) {
var i = 0;
while (i < 100) {
suggestions.push("color" + i.toString()); // for testing purpose
i++;
}
} else {
var nr = 1;
while (nr < 1025) {
suggestions.push(nr.toString() + "px");
nr = nr + 1;
}
}
$(element).autocomplete({
minLength: 1,
source: function (request, response) {
var counter = 0;
var filteredArray = $.map(suggestions, function (item) {
if (item.startsWith(request.term) && counter < 10) {
counter = counter + 1;
return item;
} else {
return null;
}
});
response(filteredArray);
},
autoFocus: true
});
}
The thing is, it works perfectly when I test it for inputs having any class except 'color'. When it detects a class with 'color', it will build the suggestions array accordingly but will refuse to get into the anonymous function inside autocomplete - source. Which is odd to me, 'cause the array is always constructed and the autocomplete should always be hit.
Any ideas?
Thanks!

jQuery's .hasClass() returns boolean value, so you code should look like:
if (element.hasClass("color")) { ... }
Try this JSFiddle (type symbol "c")

placeholder javascript fallback for textarea not working

The below is the html code:
<textarea name="test" rows="5" cols="20" placeholder="Brief description of your requirement,project, concept or idea"></textarea>
<script>
$(function() {
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
if (!supports_input_placeholder()) {
var fields = document.getElementsByTagName('textarea');
for (var i = 0; i < fields.length; i++) {
if (fields[i].hasAttribute('placeholder')) {
fields[i].defaultValue = fields[i].getAttribute('placeholder');
fields[i].onfocus = function() {
if (this.value == this.defaultValue)
this.value = '';
}
fields[i].onblur = function() {
if (this.value == '')
this.value = this.defaultValue;
}
}
}
}
});
</script>
Please help me point out the mistake. placeholder fallback functionality is not working.I have been debugging it from long time.
Below is the link for fiddle:
check the functionality in ie9 and below as they doesn't support placeholder attribute:
http://jsfiddle.net/DxcYW/
Thanks

Here it is in pure JavaScript:
(function (D, undefined) {
'use strict';
var i, length, placeholder, textareas;
function hidePlaceHolder (placeholder) {
return function (e) {
var target;
target = e.target || e.srcElement;
if (target.value === placeholder) {
target.value = '';
}
};
}
function showPlaceHolder (placeholder) {
return function (e) {
var target;
target = e.currentTarget || e.srcElement;
if (target.value === '') {
target.value = placeholder;
}
};
}
if (! ('placeholder' in D.createElement('textarea'))) {
textareas = D.getElementsByTagName('textarea');
length = textareas.length;
for (i = 0; i < length; i += 1) {
placeholder = textareas[i].getAttribute('placeholder');
textareas[i].value = placeholder;
if (textareas[i].addEventListener) {
textareas[i].addEventListener('focus', hidePlaceHolder(placeholder));
textareas[i].addEventListener('blur', showPlaceHolder(placeholder));
} else {
textareas[i].attachEvent('onfocus', hidePlaceHolder(placeholder));
textareas[i].attachEvent('onblur', showPlaceHolder(placeholder));
}
}
}
}(document));

try putting your JS in
<script> ... </script>
tags. :)

My findings and solution:
Input fields have value attribute but TEXTAREA doesn't have it.
So when we use inputObj.defaultValue="sometext" for input tag it sets the default value as well as current value to sometext, if we dont define the attribute value="something" in the input tag.This works fine from ie9 and above. For below versions if we don't define value="sometext" inputObj.defaultValue="sometext" won't set current value as the default value by itself. For this we can do two things:
we have to manually give value="something which is equal to placeholder text"
we can get the value of placeholder through javascript and set the value from there.
This is not the case with textarea. Textarea doesn't have a attribute value. So when we use textareaObj.defaultValue="sometextarea text" then the default value is set to the given text but not the value itself as we don't have value attribute.value in textarea is nothing but the content between the textarea tags.
Difference between defaultvalue and value:
default value remains the same once it is set.
value is the current value which is being modified by javascript or ourself my typing into the textfield.
For my above issue I found a workaround just by adding one more line to my code:
<textarea name="test" rows="5" cols="20" placeholder="Brief description of your requirement,project, concept or idea"></textarea>
<script>
$(function() {
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
if (!supports_input_placeholder()) {
var fields = document.getElementsByTagName('textarea');
for (var i = 0; i < fields.length; i++) {
if (fields[i].hasAttribute('placeholder')) {
fields[i].defaultValue = fields[i].getAttribute('placeholder');
fields[i].value = fields[i].getAttribute('placeholder');//setting the value
fields[i].onfocus = function() {
if (this.value == this.defaultValue)
this.value = '';
}
fields[i].onblur = function() {
if (this.value == '')
this.value = this.defaultValue;
}
}
}
}
});
</script>
Thank you guys for your quick replies and I pity the guy who voted down the question. I feel it is a good question. isn't it ?

Validate Null value in Ext JS javascript

I need to allow for the value 's1pdtCalc' to be null and allow for the record to be saved.
Right now I get the error message "s1pdtCalc is null or not an object". Thanks for the help and here is the code.
function validateForm(values) {
var pass = true;
// check percent days turnaround
var ck = values.s1pdtCalc.toString ();
if (ck > "") {
var t1 = values.s1pdtNTTd.toString (); //NEMIS Turn around
var t2 = values.s1pdtTAd.toString (); //NEMIS Turn adjustment
var t3 = values.actDays.toString (); //NEMIS Turn adjustment
t1 = (t1!=null?t1.trim ():0);
if (ck == "MINUS") {
if ((t1-t2) > t3) {
errorMsgs += '<br /> s1pdtATT - Percent days turnaround < 4.0.0. exceeds the number of activation days';
}
}
else {
if ((t1+t2) > t3) {
errorMsgs += '<br /> s1pdtATT - Percent days turnaround < 4.0.0. exceeds the number of activation days';
}
}
}
if (errorMsgs > "") {
pass = false
}
return pass;
}

You can't invoke methods on objects that don't exist. You'd need to default the s1pdtCalc to something if it doesn't exist before attempting to invoke methods:
function validateForm(values) {
...
// set ck to an empty string if values.s1pdtCalc doesn't exist
var ck = values.s1pdtCalc ? values.s1pdtCalc.toString() : '';
...