So my Javascript code is supposed to randomly pick, but it always picks the first option, even if I switch the options, it always goes to the one on top. Did I make an error, or how can I get this to work?
function test() {
var values = ["1","2"],
valueToUse = values[Math.floor(Math.random() * values.length)];
// do something with the selected value
alert(valueToUse);
}
if (values = 1) {
window.location = "tail.html"; }
else if (values = 2) { window.location = "head.html"; }
if (values = 1) {
That's an assignment, not a comparison (===). It will always be true.
Additionally, you never call test().
Additionally, you should be testing valueToUse not values, since that is where you assign your random choice.
Additionally, both valueToUse and values are locally scoped to the test() function and are not available outside it. Your assignment creates a new, global variable.
You need to use == (or ===) instead of =.
if (values == 1) {
// and so on...
}
To make your code fly, you could return a random selected value from the array, store it in value and check it for the new direction. I omit window.location and us simply console.log for displaying the result of the comparison.
The comparison is strict, with a check for a string.
function test() {
var values = ["1", "2"],
valueToUse = values[Math.floor(Math.random() * values.length)];
return valueToUse;
}
var value = test();
if (value === '1') {
console.log( "tail.html");
} else if (value === '2') {
console.log( "head.html");
}
Well, for the start if (values = 1) is not the valid way to compare.
= annotates assignment so basically you are setting the value to 1. If you want to compare values in js, you do it this way if (values === 1).
In other programming language u usually use == instead however in js if you compare it this way it will only check the value not the type of the variable so a number 2 will match a string "2"
if (2 == "2") {//result is true}.
If you use === it will check both the value and the type
if (2 == "2") {//result is false}
Related
When I use '=' in my if statement I get undefined, but when I use '===' I get my expected result. Can someone explain what's happening there?
function once(callback) {
let counter = 0;
let result;
function sum(x) {
if (counter === 0) {
result = callback(x);
counter++;
}
return result;
}
return sum;
}
const addByTwoOnce = once(function(num) {
return num + 2;
});
// UNCOMMENT THESE TO TEST YOUR WORK!
console.log(addByTwoOnce(5)); //should log 7
console.log(addByTwoOnce(10)); //should log 7
console.log(addByTwoOnce(9001)); //should log 7
'=' means you are assigning value to the variable.
if(count = 0)
means count value becomes 0.
'==' or '===' means checking the value.
if(count == 0)
checks count is 0 or not.
if(count === 0) // Strict equality comparison which means checks types also
checks count is 0 and checks both types are also equal or not.
= is Assignment operator
=== is a strict equality comparison operator
So if you are using = to your condition, it does assign the value to variable.
if (counter = 0) { // counter value is 0
result = callback(x);
counter++;
}
This could throw an error in strict mode
expected a condition but found an assignment
= is used to set values, and === is used to strictly compare values.
This article has a good explanation of the differences between == and ===: https://bytearcher.com/articles/equality-comparison-operator-javascript/
One = is only used to assign values, e.g. var x = 2;
Single '=' means you are assigning a RHS value to LHS
Double or 3 '===' means you are comparing LHS and RHS
Please explore more about assignment and comparison operators
= is used to assign values to any variable.
== is to check if the 2 values are equal or not
and === will check the values and their data types also.
FOR EX:-
float A = 1 and int B= 1
if (A==B) //TRUE
BUT IF(A===B) //FALSE ,because a and b have different datatypes
= is use for assignment while ==&=== is use for comparing two sides
BONUS:
== is used to compare the condition if LHS==RHS while
=== not only compares LHS&RHS But also check both LHS AND RHS Should have same data type 'int:int','string:string','float:float' then only
comparison between LHS& RHS is Done
I need to check that there are at least 2 values before running a script, but can't seem to get the condition to fire.
When I use if (risForm) {... the script runs when risForm is filled, and when I use if (!(risForm)) {... the script runs if risForm is empty, but I can't seem to work out how to check if any 2 of the three is full... I've tried this:
if ((!(risForm)) + (!(runForm)) + (!(angForm)) < 2) {...
along with a numerous adjustments to precise formatting/bracketting, but it's not getting me anywhere!
Make an array of the variables, filter by Boolean, then check the length of the array:
const forms = [risForm, runForm, angForm];
if (forms.filter(Boolean).length < 2) {
throw new Error('Not enough forms are filled');
}
// rest of the code
You can avoid creating an intermediate array by using reduce instead, if you wanted:
const filledFormCount = forms.reduce((a, form) => a + Boolean(form), 0);
if (filledFormCount < 2) {
throw new Error('Not enough forms are filled');
}
If you can have all your variables inside an array, you can do
yourArray.filter(Boolean).length >= 2
To break it apart, let's rewrite the above in a more verbose fashion:
yourArray
.filter(
function (variable) {
return Boolean(variable)
}
)
.length >= 2
Now, array.filter() gets every variable in the array and runs each as the argument for the function inside the parens, in this case: Boolean(). If the return value is truthy, the variable is "filtered in", if not it is "filtered out". It then returns a new array without the variables that were filtered out.
Boolean() is a function that will coerce your value into either true or false. If there's a value in the variable, it will return true... But there's a catch: it will return false for zeroes and empty strings - beware of that.
Finally, we use .length to count how many variables were "filtered in" and, if it's more than two, you can proceed with the code.
Maybe this pseudo code can illustrate it better:
const variables = ['foo', undefined, 'bar'];
variables.filter(Boolean).length >= 2;
['foo', undefined, 'bar'].filter(Boolean).length >= 2;
keepIfTruthy(['foo' is truthy, undefined is falsy, 'bar' is truthy]).length >= 2;
['foo', 'bar'].length >= 2;
2 >= 2;
true;
Javascript's true and false are useful here because when coerced to a number, they become respectively 1 and 0. So...
function foo(a,b,c) {
const has2of3 = !!a + !!b + !!c;
if ( has2of3 ) {
// Do something useful here
}
}
One caveat, though is that the empty string '' and 0 are falsy, which means they would be treated as not present. If that is an issue, you could do something like this:
function foo(a,b,c) {
const hasValue = x => x !== undefined && x !== null;
const has2of3 = hasValue(a) + hasValue(b) + hasValue(c);
if ( has2of3 ) {
// Do something useful here
}
}
let risForm = "a",
runForm = "",
angForm = "";
let arr = [risForm, runForm, angForm]
let res = arr.filter(el => !el || el.trim() === "").length <= 1
console.log(res)
There many ways to solve this. Lets try with basic idea. You want to make a reusable code and something that support multiple variables, also condition value might change. This means, we need to define an array of the form values and a condition value to verify. Then we can apply a function to verify the condition. So let's try some code:
let risForm, runForm, angForm;
risForm = 'Active';
// runForm = 3;
const formValues = [risForm, runForm, angForm];
const minFilledForms = 2;
const hasValue = a => !!a && a !== undefined && a !== null;
verifyForms();
function verifyForms() {
let filledForms = formValues.reduce((count, form) => count + hasValue(form), 0);
if (filledForms < minFilledForms) {
console.log(`Only ${filledForms} of ${formValues.length} forms have filled. Minimum ${minFilledForms} forms are requiered.`);
}
console.log('Continue...');
}
if(document.getElementById('TheId').value (>=5 && <=6))
{
//code here
}
instead of:
if(document.getElementById('TheId').value >=5 && document.getElementById('TheId').value <=6)
{
//code here
}
can this work ?! , and why not they make the condition easy like this because it points to the same source , any information ?
The condition can be written easily like that, you just have to extract the value to another variable first. Also, since .value returns a string, you probably want to cast it to a number first, just so that nothing unexpected occurs:
const value = Number(document.getElementById('TheId'));
if (value >= 5 && value <= 6) {
// do something
}
If you wanted to put it all inside the if parentheses, you could, but it would look really ugly, since you'd have to use the unintuitive comma operator:
if ((value = Number(document.getElementById('TheId')), (value >= 5 && value <= 6)) {
// do something
}
(much better to put the value into a variable beforehand)
I suppose another method would be to define two functions for testing the value, and check that everyone of the functions passes when passed the value:
if (
[val => val >= 5, val => val <= 6]
.every(
test => test(Number(document.getElementById('TheId'))
)
)
{
// do something
}
But putting the value into a variable beforehand makes much more sense.
Is there any check if a value is not null and not empty string in Javascript? I'm using the following one:
var data; //get its value from db
if(data != null && data != '') {
// do something
}
But I'm wondering if there is another better solution. Thanks.
If you truly want to confirm that a variable is not null and not an empty string specifically, you would write:
if(data !== null && data !== '') {
// do something
}
Notice that I changed your code to check for type equality (!==|===).
If, however you just want to make sure, that a code will run only for "reasonable" values, then you can, as others have stated already, write:
if (data) {
// do something
}
Since, in javascript, both null values, and empty strings, equals to false (i.e. null == false).
The difference between those 2 parts of code is that, for the first one, every value that is not specifically null or an empty string, will enter the if. But, on the second one, every true-ish value will enter the if: false, 0, null, undefined and empty strings, would not.
Instead of using
if(data !== null && data !== '' && data!==undefined) {
// do something
}
You can use below simple code
if(Boolean(value)){
// do something
}
Values that are intuitively “empty”, like 0, an empty string, null, undefined, and NaN, become false
Other values become true
Both null and an empty string are falsy values in JS. Therefore,
if (data) { ... }
is completely sufficient.
A note on the side though: I would avoid having a variable in my code that could manifest in different types. If the data will eventually be a string, then I would initially define my variable with an empty string, so you can do this:
if (data !== '') { ... }
without the null (or any weird stuff like data = "0") getting in the way.
if (data?.trim().length > 0) {
//use data
}
the ?. optional chaining operator will short-circuit and return undefined if data is nullish (null or undefined) which will evaluate to false in the if expression.
I often test for truthy value and also for empty spaces in the string:
if(!(!data || data.trim().length === 0)) {
// do something here
}
If you have a string consisting of one or more empty spaces it will evaluate to true.
Simple solution to check if string is undefined or null or "":-
const value = null;
if(!value) {
console.log('value is either null, undefined or empty string');
}
Both null and empty could be validated as follows:
<script>
function getName(){
var myname = document.getElementById("Name").value;
if(myname != '' && myname != null){
alert("My name is "+myname);
}else{
alert("Please Enter Your Name");
}
}
try it----------
function myFun(){
var inputVal=document.getElementById("inputId").value;
if(inputVal){
document.getElementById("result").innerHTML="<span style='color:green'>The value is "+inputVal+'</span>';
}
else{
document.getElementById("result").innerHTML="<span style='color:red'>Something error happen! the input May be empty.</span>";
}
}
<input type="text" id="inputId">
<input type="button" onclick="myFun()" value="View Result">
<h1 id="result"></h1>
I got so fed up with checking for null and empty strings specifically, that I now usually just write and call a small function to do it for me.
/**
* Test if the given value equals null or the empty string.
*
* #param {string} value
**/
const isEmpty = (value) => value === null || value === '';
// Test:
isEmpty(''); // true
isEmpty(null); // true
isEmpty(1); // false
isEmpty(0); // false
isEmpty(undefined); // false
When we code empty in essence could mean any one of the following given the circumstances;
0 as in number value
0.0 as in float value
'0' as in string value
'0.0' as in string value
null as in Null value, as per chance it could also capture undefined or it may not
undefined as in undefined value
false as in false truthy value, as per chance 0 also as truthy but what if we want to capture false as it is
'' empty sting value with no white space or tab
' ' string with white space or tab only
In real life situation as OP stated we may wish to test them all or at times we may only wish to test for limited set of conditions.
Generally if(!a){return true;} serves its purpose most of the time however it will not cover wider set of conditions.
Another hack that has made its round is return (!value || value == undefined || value == "" || value.length == 0);
But what if we need control on whole process?
There is no simple whiplash solution in native core JavaScript it has to be adopted. Considering we drop support for legacy IE11 (to be honest even windows has so should we) below solution born out of frustration works in all modern browsers;
function empty (a,b=[])
{if(!Array.isArray(b)) return;
var conditions=[null,'0','0.0',false,undefined,''].filter(x => !b.includes(x));
if(conditions.includes(a)|| (typeof a === 'string' && conditions.includes(a.toString().trim())))
{return true;};
return false;};`
Logic behind the solution is function has two parameters a and b, a is value we need to check, b is a array with set conditions we need to exclude from predefined conditions as listed above. Default value of b is set to an empty array [].
First run of function is to check if b is an array or not, if not then early exit the function.
next step is to compute array difference from [null,'0','0.0',false,undefined,''] and from array b. if b is an empty array predefined conditions will stand else it will remove matching values.
conditions = [predefined set] - [to be excluded set]
filter function does exactly that make use of it.
Now that we have conditions in array set all we need to do is check if value is in conditions array.
includes function does exactly that no need to write nasty loops of your own let JS engine do the heavy lifting.
Gotcha
if we are to convert a into string for comparison then 0 and 0.0 would run fine however Null and Undefined would through error blocking whole script. We need edge case solution. Below simple || covers the edge case if first condition is not satisfied. Running another early check through include makes early exit if not met.
if(conditions.includes(a)|| (['string', 'number'].includes(typeof a) && conditions.includes(a.toString().trim())))
trim() function will cover for wider white spaces and tabs only value and will only come into play in edge case scenario.
Play ground
function empty (a,b=[]){
if(!Array.isArray(b)) return;
conditions=[null,'0','0.0',false,undefined,''].filter(x => !b.includes(x));
if(conditions.includes(a)||
(['string', 'number'].includes(typeof a) && conditions.includes(a.toString().trim()))){
return true;
}
return false;
}
console.log('1 '+empty());
console.log('2 '+empty(''));
console.log('3 '+empty(' '));
console.log('4 '+empty(0));
console.log('5 '+empty('0'));
console.log('6 '+empty(0.0));
console.log('7 '+empty('0.0'));
console.log('8 '+empty(false));
console.log('9 '+empty(null));
console.log('10 '+empty(null,[null]));
console.log('11 dont check 0 as number '+empty(0,['0']));
console.log('12 dont check 0 as string '+empty('0',['0']));
console.log('13 as number for false as value'+empty(false,[false]));
Lets make it complex - what if our value to compare is array its self and can be as deeply nested it can be. what if we are to check if any value in array is empty, it can be an edge business case.
function empty (a,b=[]){
if(!Array.isArray(b)) return;
conditions=[null,'0','0.0',false,undefined,''].filter(x => !b.includes(x));
if(Array.isArray(a) && a.length > 0){
for (i = 0; i < a.length; i++) { if (empty(a[i],b))return true;}
}
if(conditions.includes(a)||
(['string', 'number'].includes(typeof a) && conditions.includes(a.toString().trim()))){
return true;
}
return false;
}
console.log('checking for all values '+empty([1,[0]]));
console.log('excluding for 0 from condition '+empty([1,[0]], ['0']));
it simple and wider use case function that I have adopted in my framework;
Gives control over as to what exactly is the definition of empty in a given situation
Gives control over to redefine conditions of empty
Can compare for almost for every thing from string, number, float, truthy, null, undefined and deep arrays
Solution is drawn keeping in mind the resuability and flexibility. All other answers are suited in case if simple one or two cases are to be dealt with. However, there is always a case when definition of empty changes while coding above snippets make work flawlessly in that case.
function validateAttrs(arg1, arg2, arg3,arg4){
var args = Object.values(arguments);
return (args.filter(x=> x===null || !x)).length<=0
}
console.log(validateAttrs('1',2, 3, 4));
console.log(validateAttrs('1',2, 3, null));
console.log(validateAttrs('1',undefined, 3, 4));
console.log(validateAttrs('1',2, '', 4));
console.log(validateAttrs('1',2, 3, null));
Had some problems with a script running, which was mainly built around dropdown menus. Single equals = and exactly equals == were both used in the same function, though not same if statement. Could not see anything else amiss and made all uses ==, which seemed to resolve problem. I'm relatively new to Javascript, so was just wondering if combining different styles of equals makes a difference was all. Didn't think it did.
Your question doesn't really make sense - these are different operators. In javascript:
= is the assignment operator, e.g.
var x = 1;
if (x = 1) // This would not compare x to 1, it would assign the value 1 to x
// and then return the value to the if block which would decide
// whether the value is truthy or not (and in this case
// return true).
== is the comparison operator, e.g.
var x == 1; //This would not make sense (or run)
if (x == 1) {
=== does a comparison and ensures that both operands are the same type:
var x = "1";
if (x == 1) { //Returns true
if (x === 1) //returns false.
= assigns values to variables.
== and === are comparison operators.
Of course your script logic changes quite a bit when you exchange = and == operators.