For this code:
var i = 0;
for (i < menuitem.length; i += 1;)
JSlint returns:
Expected a conditional expression and instead saw an assignment.
Expected an identifier and instead saw ')'.
And refuses to continues scanning.
This code works fine but what is wrong? How could I write this with an "if" statement? (if that is what jslint means).
Thanks for your help guys!
Yeah, JSLint is pretty vicious. As others have pointed out, you're not filling things in in the right places, but aside from that, JSLint requires that you put something in the initialization part of the for loop. There are a couple options you can do to make it play nice without messing with your logic, though. My favorite is to just reset i (even though it's already set):
var i = 0;
for (i = 0; i < menuitem.length; i += 1) {
/** do stuff **/
}
This make JSLint happy and also ensures that i gets reset if you decide to use it for another for loop in the same lexical scope. Another option is to just toss a null in there to fill the space (if you don't want to reset the value of i):
var i = 0;
for (null; i < menuitem.length; i += 1) {
/** do stuff **/
}
Both work fine and appease the ever-so-worrisome JSLint. However, no one will really care if you just leave the initialization part blank (aside from JSLint). You might try JSHint, as it's a bit more forgiving on this sort of thing.
Your for loop is kind of weird, the second part should be a condition for the loop, instead you have an assignment.
You must always have the parts in order (initialisation; condition; step).
var i = 0;
for (; i < menuitem.length; i += 1)
I just moved your semicolon from the end to the start. Alternatively, you can place the variable declaration and assignment inside the first part if you like.
for (var i = 0; i < menuitem.length; i += 1) {
// code
}
Or
var i = 0;
for (; i < menuitem.length; i += 1) {
// code
}
Found it! Here is the precise answer for validation:
var i;
for (i = 0; i < menuitem.length; i += 1) {
// code
}
var should be outside says jslint :s
From your code snippet, I'm going to assume that i is simply a variable used to control the number of cycles of your loop. The correct code would be
for (var i = 0; i < menuitem.length; i += 1) {
// code
}
That is the standardized declaration and syntax - at least for the languages I can think of right now. And that is really the point of this type of loop - for loops were designed this way so the author can simply write one line of code versus more if he/she wanted to do a while loop.
Related
var hash = "";
var count = 1;
var n = 3;
for (var pound = 1; pound <=7; pound ++)
{while (hash.length != count)
hash += "#";
hash += "\n";
count += n;
n ++;}
console.log(hash);
Hi, I'm new to Javascript and fairly new to coding in general. I've spend a couple of hours analyzing my code above. BTW, I generated myself without any assistance. I wouldn't say I'm proud because I dont know why or how it works. I guess I get the basic math behind the work and when I check the values of the variables at the final end, the results match my calculation. But I dont know exactly what happens. It generates a triangle using '#'. I've tried removing the For loop to see exactly what the while loop is doing but I cant get a hang of it. Please take a look.
At first, in the first For loop and coming into the while loop, the value of hash.length is 0. Comparing it to count which 1, they do not match and so nextline. After adding "#" and "\n", hash.length becomes 2. But the code is read to the end making var count now 4 and var n equal to 4 also.
Now, the next loop does not happen inside the while loop and I've tried this out myself. It goes back to the For Loop. Checking the condition of "hash.length != count", this condition still holds as hash.length is 2 and count is now 4. Since they are not equal, shouldn't the while take repeat before going back to the For loop again?
while (cond)
statement1;
statement2;
does not do what you think (and the indentation is lying to you). Reformating the code to be true to the logical flow gives you this:
var hash = "";
var count = 1;
var n = 3;
for (var pound = 1; pound <= 7; pound++) {
while (hash.length != count)
hash += "#";
hash += "\n";
count += n;
n++;
}
console.log(hash);
While repeats only the very next statement. If you need it to repeat more, you have to use a compound statement (statement block) using the curly braces.
Here, for loop will go once for each row; within that, while will go once for each hash character.
Any loop without brackets { <-code here-> } only loops looking the following line.
So your while is doing only this:
while (hash.length != count)
hash += "#";
So, removing your for loop, you will have hash = "#" (because count starts at 1, and hash.length is 0), and then the following will happen:
hash += "\n";
count += n;
n++;
Basically, hash will be # with a line break.
The answer to your question is that
since the while loop has no brackets to indicate the code inside the loop.
only one line, the
hash += "#";
gets execute, and when you get to the line that modifies the value of the count:
count += n;, the while loop wont repeat since you already exited that loop.
Usually you want to keep the code as simple as possible.
you can get the same result as the code you posted by simply writing it this way:
var hash="";
for (var pound = 1; pound <=7; pound ++)
{
hash += "#";
console.log(hash);
}
you will use far less variables, the length of hash will greatly be reduce.
sometimes too many string concatenation slows down code execution.
what the code above does is run a for loop seven times, each time, it appends a '#' to the hash string and displays it on the console...
same result, fewer lines, faster execution, and much easier to read.
if your are new to programming, I would recommend you start with a programming language the encourage good programming practice.
although PASCAL is not very popular anymore, learning it first before any C style language, would most likely get you up and running in writing very good code.
I know Pascal haters will probably criticize.. but, this language is good to get you to concentrate on algorithms and good programming style. which should be your first step before jumping into any language.
I am admittedly a super newbie to programming in general. I am trying to design a quick piece of javascript to inject on a website for a class that will both uncheck and simulate a click on a series of checkboxes. This is nothing malicious, the web form we use to download data for use in this class presents way more variables than necessary, and it would be a lot more convenient if we could 'uncheck' all and only check the ones we want. However, simply unchecking the boxes via javascript injection doesn't yield the desired result. A mouse click must be simulated on each box. I have been trying to use the .click() function to no avail. Any help is greatly appreciated. My code below fails with an error of:
"TypeError: Cannot read property 'click' of null"
CODE:
var getInputs = document.getElementsByTagName("input");
for (var i = 0, max = getInputs.length; i < max; i++){
if (getInputs[i].type === 'checkbox')
getInputs[i].checked = false;
document.getElementById('shr_SUBJECT=VC' + i).click();
}
--------EDIT#1--------------
FYI, this is the website that I am trying to use this on:
http://factfinder2.census.gov/faces/nav/jsf/pages/searchresults.xhtml
if you search for and open up any of these tables they are huge. It would be awesome if I could easily pare down the variables by 'unchecking' and 'clicking' them all at once via javascript.
The code at the bottom ALMOST works.
The problem I am running into now is that it throws an error after the first or second run through the for loop:
"TypeError: document.getElementById(...) is null"
I understand that this is because the value it's trying to find doesn't exist? Sometimes on these tables the checkboxes are greyed out/don't exist or are otherwise 'unclickable'. My theory as to why I am getting this error is because in the table/form the 'available' ID's will start around:
shr_SUBJECT=VC03 or sh_SUBJECT=VC04
and it may then skip to:
shr_SUBJECT=VC06 then skip to shr_SUBJECT=VC09 and so on...
So if the for loop hits an ID that isn't available such as 05 or 07, it returns a null error :(
I did some reading and learned that javascript is able to 'catch' errors that are 'thrown' at it? My question now is that I'm wondering if there is an easy way to simply iterate to the next ID in line if this error is thrown.
Again, any and all help is appreciated, you guys are awesome.
OLD DRAFT OF SCRIPT
var getInputs = document.getElementsByTagName("input");
for (var i = 3, max = getInputs.length; i < max; i++){
if (getInputs[i].type === 'checkbox' && i < 10){
var count = i;
var endid = count.toString();
var begid = "shr_SUBJECT=VC0";
var fullid = begid.concat(endid);
document.getElementById(fullid).click();
}
else if(getInputs[i].type === 'checkbox' && i >= 10){
var count = i ;
var endid = count.toString();
var begid = "shr_SUBJECT=VC";
var fullid = begid.concat(endid);
document.getElementById(fullid).click();
}
}
--------EDIT#2----------
An example of a table that I am trying to manipulate can be found at this URL:
http://factfinder2.census.gov/faces/tableservices/jsf/pages/productview.xhtml?pid=ACS_12_5YR_DP02&prodType=table#
If you click on the 'Modify Table' button, you are able to select/deselect specific variables via the checkboxes. If you right-click on a couple of 'active' checkboxes and inspect the elements, and it looks something like this:
<input id="shr_SUBJECT=VC03" checked="" alt="hide SUBJECT=VC03" name="" value="" onclick="javascript:hiderow('SUBJECT=VC03');" type="checkbox">
<input id="shr_SUBJECT=VC25" checked="" alt="hide SUBJECT=VC25" name="" value="" onclick="javascript:hiderow('SUBJECT=VC25');" type="checkbox">
Thank you so much #Jonathan Steinbeck for the tip about the ternary operator, it really cleaned up my code.
The script works properly, but the problem I am running into now is that it doesn't iterate enough times after the try, catch statement. If there is a gap in the id #'s; say it jumps from shr_SUBJECT=VC19 to shr_SUBJECT=VC=24 the script will stop running. Is there a way to make it keep retrying the try/catch until it gets a valid ID # or one that exists/is an active checkbox?
CURRENT DRAFT OF SCRIPT :
var getInputs = document.getElementsByTagName("input");
for (var i = 3, max = getInputs.length; i < max; i += 1) {
try {
if (getInputs[i].type === 'checkbox'){
document.getElementById("shr_SUBJECT=VC" + (i < 10 ? "0" : "") + i).click();
}
}
catch (err) {
i+=1;
if (getInputs[i].type === 'checkbox'){
if (getInputs[i].type === 'checkbox'){
document.getElementById("shr_SUBJECT=VC" + (i < 10 ? "0" : "") + i).click();
}
}
}
}
When you call document.getElementById() with a non-existing ID, null is returned. Therefore this error means that you're trying to call the .click() method on null, which can't work.
So you should check what the correct ID naming scheme for the elements you want is. Maybe the elements' count starts with 1 instead of 0?
Also, the .click() doesn't work for all elements like you would expect as far as I know. So depending on the kind of element you are trying to retrieve you might have to create and dispatch your own event as suggested by RobG's comment.
EDIT in response to your recent edit:
You can wrap code that throws errors in a try-catch like this:
for (var i = 3, max = getInputs.length; i < max; i += 1) {
try {
document.getElementById("the_ID").click();
}
catch (error) {
console.error(error);
// continue stops the current execution of the loop body and continues
// with the next iteration step
continue;
}
// any code here will only be executed if there's not been an error thrown
// in the try block because of the continue in the catch block
}
Also, what are you doing with the 'i' variable? It doesn't make sense to assign it to so many variables. This does the same:
document.getElementById("shr_SUBJECT=VC" + (i < 10 ? "0" : "") + i).click();
The ... ? ... : ... is an operator (called the 'ternary operator') that works like this: evaluate the expression before the "?" - if it results in a truthy value, the expression between "?" and ":" is evaluated and becomes the result of using the operator; if the condition results to false, the part after the ":" is evaluated as the value of the operator instead. So while "if" is a statement in JavaScript (and statements usually don't result in a value), the ternary operator can be used as an expression because it results in a value.
By concatenating a string with something else, you are forcing the 'something else' to be converted to string. So an expression like this will usually result in a string:
"" + someNonStringVar
Also, it doesn't make sense to define variables in a loop body in JavaScript. JavaScript variables have function scope, not block scope. What this means is that any variables defined in the loop body exist inside the whole function as well. Therefore it is recommended to write all of the "var"s at the top of your function to make it clear what their scope is. This behaviour of JavaScript is called 'hoisting', by the way.
I've furthermore taken a look at the URL you've given in your recent edit but I fail to find the kind of naming scheme for IDs you describe. In which table did you find those?
Edit in response to your second edit:
You shouldn't mess with the 'i' variable inside the body of a for loop. It makes your code much harder to reason about and is probably not what you want to do anyway. You don't need to handle the next step of the iteration in the catch block. The 'i' variable is incremented even if there's an error during fetching the element from the DOM. That's why you use catch in the first place.
var elemText = document.getElementById("insert");
for (var k = 1; k <= 4; k++) {
for (var j = 1; j <= k; j++) {
elemText.innerHTML += ('*');
};
elemText.innerHTML += ('<br>');
};
Teardown:
document.getElementById("insert").innerHTML = "";
Is there a coding error? Is is just horribly inefficient (I think this unlikely to be the sole reason)? Is it something to do with the way the test is set up?
Is there a coding error?
Yes. You forgot to reinitialize the <div> in test #2. You need to empty it, just as you set result = [] in test #1. Doing it in the teardown is not enough, and test #2 will generate much longer texts before clearing than test #1.
Also, your test cases have not the same result. Since you want to output <br /> elements in test #1 as well, you would need to use innerHTML there, too. Your current code did output <br> literally as text.
Improved test setup
Is is just horribly inefficient?
Yes. Working with innerHTML is inefficient - it needs the HTML parser each time you assign to it, and you are doing it very often. Also, since you are using += it needs to serialize the DOM each time.
I have a checkbox contained within a form on my page. When the user clicks a button I need to find out which items in the checkbox have been selected.
I can get this to work with the following code without ay problems.
for (i=0; i < Form3.CBox1.length; i++)
if (Form3.CBox1[i].checked)
{
Answer = Answer + Form3.CBox1[i].value + ",";
}
alert(Answer);
The problem I have is that I call the above function several times on my page and I want to pass in variables instead of hard coding the name of the form and checkbox. Everytime I do this Javascript will not return anything. The variables vCurrForm & vCurrCBox, in the following code, have been set earlier in another function and I have tested to ensure that they are set correctly but I still can't get this piece of code to work.
for (i=0; i < vCurrForm.vCurrCBox.length; i++)
if (vCurrForm.vCurrCBox[i].checked)
{
Answer = Answer + vCurrForm.vCurrCBox[i].value + ",";
}
alert(Answer);
Any help would be greatly appreciated. Thanks
When working with variables as the keys to an object, you need to use the array syntax (ie. []s), which on its own would give us this (still broken) code:
for (i=0; i < vCurrForm[vCurrCBox].length; i++)
{
if (vCurrForm[vCurrCBox][i].checked)
{
Answer = Answer + vCurrForm[vCurrCBox][i].value + ",";
}
}
alert(Answer);
The problem is that vCurrForm is still being treated as a regular old variable, even though it's the string name of that variable. Because of this, you need to reference it from its parent; window:
for (i=0; i < window[vCurrForm][vCurrCBox].length; i++)
{
if (window[vCurrForm][vCurrCBox][i].checked)
{
Answer = Answer + window[vCurrForm][vCurrCBox][i].value + ",";
}
}
alert(Answer);
Without seeing how you are declaring and setting these values it is very difficult to ascertain the problem. It could be related to the type of object the variables are being set to, or their scope. Here are some things to check:
Ensure the variable vCurrForm.vCurrCBox is an array.
Ensure that vCurrForm and vCurrCBox are declared in a scope that is accessible to the function being called.
In this case make sure you are setting vCurrForm to a Form Object and vCurrCBox to an array of checkbox controls.
Looking at the code provided almost makes me think that the variable being referenced is for a single item (Current Checkbox). Your probably not going to get the results you are looking for in that case.
Something else to consider if it is possible would be to use JQuery to more easily grab the checked boxes and concatenate their values. In JQuery your code could be done with something like:
var Answers = "";
$("input[type='checkbox']:checked").each(function() { Answers += $(this).val() + ", "; });
Or, a better solution is to pass reference to the array that contains elements, instead of matching it with strings. For example:
function getAnswers(items) {
for (var i = 0; i < items.length; i++)
{
if (items[i].checked) {
Answer = Answer + items[i].value + ",";
}
}
}
Thank you ever so much for all you help. I've seen the error of my ways.
The following worked for me
**for (i=0; i < document[vCurrForm][vCurrCBox].length; i++)
if (document[vCurrForm][vCurrCBox][i].checked)
{
Answer = Answer + document[vCurrForm][vCurrCBox][i].value + ",";
}**
I have the folowing code:
var transitionsSettingsClass = document.getElementsByClassName("transitionsSettings");
var transitionsSettingsClassLenght = transitionsSettingsClass.length;
for (i=0; i < transitionsSettingsClassLenght; i++);
{
transitionsSettingsClass[i].setAttribute("data-transition",transitionsSettings);
};
I know that transitionsSettingsClassLenght = 6 because I have checked it with alert. But when I put an alert inside cycle then it shows only 1-time (it should show 6-times). An also attribute data-transition is not set. But when I replace "i" inside transitionsSettingsClass[i] with transitionsSettingsClass[0] my first element changes and it is working. This script is supposed to change attribute data-transition in 6 elements.
Remove the ; at the end of
for (i=0; i < transitionsSettingsClassLenght; i++);
The for here only commands the code before the ;, that is nothing.
I'd recommend you to use the most frequent javascript style, as explicited by Google, as it helps avoid this kind of errors.
Have you tried with jquery each method?
$('.transitionsSettings').each(function(index) {
$(this).setAttribute("data-transition",transitionsSettings);
});
Just as a sidenote:
In all modern browsers you can set data- attributes by calling
node.dataset.transition = transitionsSettings;
The code below is interpreted as follows:
for (i=0; i < transitionsSettingsClassLenght; i++);
{
transitionsSettingsClass[i].setAttribute("data-transition",transitionsSettings);
};
The first line: for (i=0; i < transitionsSettingsClassLenght; i++); is executed 6 times as Javascript thinks its a single statement. Then it encounters
{
transitionsSettingsClass[i].setAttribute("data-transition",transitionsSettings);
}; which is executed once as a block. Removing the ; from the end of the for loop will solve the problem.