We Keep Coding

What does this for-loop do?

for (o.$slider.addClass("slick-dotted"), t = i("<ul />").addClass(o.options.dotsClass), e = 0; e <= o.getDotCount(); e += 1)
t.append(i("<li />").append(o.options.customPaging.call(this, o, e)));
(o.$dots = t.appendTo(o.options.appendDots)), o.$dots.find("li").first().addClass("slick-active");
I have to modify a JS-Script from a template I downloaded. In order to do this, I first wanted to understand the script, so I know where and what I have to change. But I don't understand what these lines of code do, can anyone help?(I understand the principle of for-loops, but this one seems different and I'm a bit confused.
And yes I'm aware that you can't tell me what exactly will appear on the website, since you only have two lines of code, but I just need to know what happens with a specific class or element and I hope you can read this information from these two lines).
Thanks in advance

Strip back the object/plugin calls, add a couple of console logs:
for (console.log('do this'), console.log('then this'), e = 0; e <= 10; e += 1)
console.log.call(this, 'slider', e);
result is:
do this
then this
slider 0
slider 1
slider 2
slider 3
slider 4
slider 5
slider 6
slider 7
slider 8
slider 9
slider 10
It's building out <li>'s for the slick slider DOM

It seems like minified code, it will therefore always be hard to read and understand. You should get the unminified version and work on that instead.
Here is the same code unminified plus the rest of surrounding function (from GitHub), I hope now it makes a lot more sense:
Slick.prototype.buildDots = function() {
var _ = this,
i, dot;
if (_.options.dots === true && _.slideCount > _.options.slidesToShow) {
_.$slider.addClass('slick-dotted');
dot = $('<ul />').addClass(_.options.dotsClass);
for (i = 0; i <= _.getDotCount(); i += 1) {
dot.append($('<li />').append(_.options.customPaging.call(this, _, i)));
}
_.$dots = dot.appendTo(_.options.appendDots);
_.$dots.find('li').first().addClass('slick-active');
}
};
It checks if the option dots is set and there are more slides than visible, and in this case it adds the class slick-dotted to the slider and creates an <ul> with the dotsClass and fills it with <li>s that contain the return value of the customPaging function. At the end, the first <li> gets the slick-active class. - I.e., it creates the dot navigation for the slides.

Why cant I scroll browser window in a loop in console?

I want to scroll down the browser window in a loop in console. I want it so that every time a scroll down (x)px down I stop, do something and then scroll (x)px again and then stop etc. until the page with ends (its a very long one, I want to parse info from it).
But when I started I stumbled upon an issue, that the scrolling function is executed only once, after the loop ends.
let i = 0;
scrollDownTillEnd = () => {
for(i; i<100; i++) {
window.scrollBy(0, 1000);
};
scrollDownTillEnd();
(it is a simplified example, but the idea should be clear)
I put the code in the console, being on a page I want to scroll, and get then the value of i at the end of the loop and only one scroll down.
Please, explain me, why this piece of code behaves like this and how to make it work, as I mentioned before (in every loop it scrolls a little bit).
Thank you!

Let me help address a few issues going on here.
1) You have an infinite loop going on because you are not checking that i is less than 100 even though you are incrementing it each time. You need to check that i < 100 so that the loop will eventually end. In your loop, 0 will always be less than 100 so the loop will never end.
2) You have a syntax error in your example because you're not actually closing out the scrollDownTillEnd function with a curly brace before calling the function itself.
3) Lastly, as good practice, you need to reset your i variable to 0 each time so that we can run this piece of code over and over again. The way you have it set up in your example, since i will be equal to 100 at the end of the first run, the loop won't ever run again after that until you reset i to 0 again. The easiest way to do this is to just initialize i to a value of 0 each time you execute this loop.
Try something like this:
scrollDownTillEnd = () => {
for(let i = 0; i < 100; i++) {
window.scrollBy(0, 1000);
};
};
scrollDownTillEnd();

You can use setInterval() since for loop will executes only once
function scrollDownTillEnd(countryDropdownList)
{
let scrollingInterval = setInterval(function(){
window.scrollBy(0,1000)
// write your condition
if (window.scrollHeight > 10000)
{
clearInterval(scrollingInterval)
}
},100)
}
scrollDownTillEnd();

How to do something indefinitely until a condition is met, with no loop?

Whenever I use a loop, the tab crashes. I can't seem to figure out how to work this out. I just start typing while(true) {document.getElementById("loadingText").textContent++;} and before I can type if(document.getElementById("loadingText").textContent === "100") {break;} the screen freezes and the tab crashes. Can someone help me?

Since you're using an online editor with real-time browser updates based on changes, you need to make sure you don't make your code loop infinitely. Sadly that's what while (true) { // code } does if there's no code in the statement to break the loop.
For the timebeing, until you've figured out the meat of that loop, just intentionally cause an error:
while (i <= 100) { // code }
which you can go ahead an amend until you get the desired result.
There are a couple of things you should take into account.
1) You should cache the element once so you're not repeatedly grabbing it on each loop iteration.
2) textContent is a string, so you can't use el.textContent++ as it won't be successfully evaluated.
3) You'll find it difficult to slow a traditional loop down so that you can see the number increment properly.
So here's a method using setTimeout instead of a traditional loop.
// Cache the element
const el = document.getElementById("loadingText");
(function displayNumber(n, end) {
// Repeat until the iteration number (n)
// is 10 (for this example)
if (n <= end) {
el.textContent = n;
// Wait 0.5s then call the function again with an increased n
setTimeout(() => displayNumber(++n, end), 500);
}
// Pass in the initial number, and the end limit
}(1, 10));
<div id="loadingText"></div>

You are asking if your property is === "100" as ++ increment the numeric value, the loop never breaks, compare to 100 instead of "100" as string
if(document.getElementById("loadingText").textContent == "100") {break;}
or
if(document.getElementById("loadingText").textContent === 100) {break;}

I dont think that a textContent could be incremented. Try Node.value++.
If this still doesn't works. To run an infinite loop you can use setInterval(); method.
example:
var i=0;
var z = setInterval(foo,10);
function foo() { alert(i); }
In the above example the function foo() will execute infintely with a gap of 10 mili seconds. You can put it to 0 ms as well if you wish to.

False positives while comparing integers in Javascript

I'm facing a really strange problem comparing integer in Javascript. I have an array of numbers and I want to check if the current number in a loop is smaller than the previous one. To do so, I save the "current" number as "previous", so I can check them in the next loop. The function runs as expected, EXCEPT every time the current and the previous number have a different number of digits: in this case, the code doesn't see the actually smaller number as being smaller than the previous one.
For example:
111 < 120 ? ---> YES!
106 < 111 ? ---> YES!
98 < 106 ? ---> NO!
76 < 98 ? ---> YES!
5 < 76 ? ---> NO!
I'm unable to find anything strange in the code I'm using, as it is quite simple:
for(var j=0;j<arrScores.length;j++)
{
if(arrScores[j][0] < scoreAnt)
{
console.log("Smaller!");
}
scoreAnt = arrScores[j][0];
}
I've tried using parseInt() in both values, but nothing changes... Checking the length of both numbers using scoreAnt.toString().length returns a length of 1, no matter which number it is (100, 34 or 156798), and the same for arrScores[j][0]. I've also logged the whole thing to check that the numbers are the expected ones, and they are (the numbers used in the example are some of the ones I'm using)...
Any clue on what can be happening? I'm really lost with this, becuase it makes no sense for me...
Thanks in advance for your time and effort! :)

You always do scoreAnt = arrScores[j][0]; in the loop; but you should only do that if arrScores[j] is smaller; i.e. inside the inner curly braces.
for(var j=0;j<arrScores.length;j++)
{
if(arrScores[j][0] < scoreAnt)
{
console.log("Smaller!");
scoreAnt = arrScores[j][0];
}
}

Well, don't even know why, but after changing something relating the CORS of the server where these numbers came from (but not modifying the numbers at all), the comparison seems to work as expected... Have no clue about what might have changed! :S However, now it works correctly...

Checking script within Function

I've been doing great with my JS self-training. I'm stoked since I finally learned functions, and, or, calling functions, etc. I'm even excited because I sorted everything by user editable variables, non user variables, and created functions for everything else. So I have a question I'm trying to figure out. I am adding error codes to all my editable variables. My reasoning is that I know I won't always be in this position, job, life, etc, so I want to make sure that if someone new comes along, they will be able to edit and go. If they put alskjdfl where a 1, 2 or 3 should go, I'd like to return an error. I'm nerding out and adding my own error numbers for fun. Then if the user is smart enough they can view source on the JS code and see my notes as to why the error is displaying. Oh by the way, this is all internal documents, so I'm not worried about the web.
Below is the code. Basically, if I go to the variable and put in an alphabet character or some characters alsdfjlkjsdaf, it will break the page. I'm trying to find a way that says, if there is something in there beside 1-3, then set the speed to 1 and give an error. My attempts at this have failed so far because no matter what I put in there, it still breaks the page once a character is listed. I thought the name of the function seemed appropriate. :)
This is for a scrolling bar. It displays text information as well as work related things and a clock. It's embedded within an iframe.
/* Start speedlimit code - This code ensures speed won't be faster than 3. */
function speedLimitSet()
{
if ((speedSet !== 1) && (speedSet !== 2) && (speedSet !== 3))
{
speedSet = 1
//error code 1003
alert("Error Code 1003 - speedSet - Please change speed to 3 or less. This pop up will continue to pop up otherwise. Speed limit is set to 3 or less.")
}
}
//end speedlimit code
Edit:
/* Quality check for turnOffcrawler. It has to be typed as "Yes" or "No" else will error. */
function crawlerSwitch()
{
if (turnOffcrawler == "No") /* Code for general message is included in here. It looks long but it is spaced out. */
{
width = "1000px";
speed = speedSet;
errorFlag1000 = "No";
}
else if (turnOffcrawler == "Yes")
{
width = "0px";
speed = 0;
errorFlag1000 = "No";
}
else
{
width = "1000px";
speed = speedSet
errorFlag1000 = "Yes"
importantMessageError = "Error Code 1000 - turnOffcrawler is not set correctly. Please check settings and/or refer to instructions. &nbsp&nbsp&nbsp&nbsp&nbsp Error Code 1000 - turnoffcrawler is not set correctly. Please check settings and/or refer to instructions."
}
}
//end quality check
Which then links to:
function marqueeInitCall()
{
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '0px',
'width': width, //change to 1000 for normal, change to 0 for off
'background': scrollerBackground, //#00008B is background of menu bar
'border': '0px solid black'
},
inc: speed, //speed - pixel increment for each iteration of this marquee's movement
mouse: mouse, //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 1,
neutral: 150,
savedirection: true
});
}

A couple of problems with that code:
You're not declaring any arguments. I'm guessing speedSet was meant to be an argument to the function?
You're using !== which is correct if you know that what you're being passed is already a number, not a numeric string. If you don't know that, you want to parse it first.
I probably wouldn't check against all three values individually, but that might be a style thing.
It's not saving the resulting value anywhere (so maybe my #1 is wrong). If speedSet is a global variable and this function is just validating its value, I'd recommend not using global variables.
so:
/* Start speedlimit code - This code ensures speed won't be faster than 3. */
function speedLimitSet(speedSet)
{
speedSet = parseInt(speedSet, 10); // Now it's a number or `NaN`
if (isNaN(speedSet) || speedSet < 1 || speedSet > 3)
{
speedSet = 1;
//error code 1003
alert("Error Code 1003 - speedSet - Please change speed to 3 or less. This pop up will continue to pop up otherwise. Speed limit is set to 3 or less.")
}
// Save it somewhere appropriate here
}
//end speedlimit code
Other items of note:
Indenting your code makes a huge difference to readability. Note how I've indented the code above.
Although JavaScript has the horror that is automatic semicolon insertion, my humble advice is never rely on it, always put in all of the necessary semicolons. (You needed one after speedSet = 1.)
alert isn't a great way to deal with programming errors. Recommend throwing an exception and handling it at a higher level in the code.
You're free to do what you like with your function names, but the convention for setter functions is usually setXyz (e.g., setSpeedLimit rather than speedLimitSet).