We Keep Coding

assigning varying inputs to varying positions in a 4 by 4 array

I am writing a JavaScript program that is supposed to generate a number (2 90% of the time, 4 for the other 10%). This works fine, however the number is then supposed to randomly replace one of the spots in the array that had previously had a value of zero. As far as I can tell, my code that should work but it does not and I get this error message:
Cannot read property '0' of undefined
I've included my code below but it may look weird because I am using Khan Academy's JavaScript teaching tool which might not be the same as normal JavaScript (I am not sure about this since I am new to the language).
var M=[[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
var NewTile=function(M){
var open=0; // checks all tiles to see whitch ones are 0's
var available=[]; // while recorfing the number of zeros and
for (var p=0; p<=3; p+=1){ // thier positions
for (var q=0; q<=3; q+=1){
var i=M[p][q];
if (i===0){
open=open+1;
available.push([p,q]);
}
}
}
var TwoOrFour=random(1,10);
var NewValue;
if (TwoOrFour===10){ // generates the new value
NewValue=4;
}else{
NewValue=2;
}
var NewPos;
if (open===0){ // decides whether the game is lost
var over=true;
return over;
}else{ // replaces the correct spot in the array
var GetPos=random(0,open);
var NewPos=available[GetPos];
M[NewPos[0]][NewPos[1]]=NewValue; // THIS IS WHERE THE ERROR SEEMS TO CAUSE AN ISSUE
}
return M;
};
var M=NewTile(M);
println(M[0]);
println(M[1]);
println(M[2]);
println(M[3]);
Can anyone tell me what I am doing wrong and why I am getting this error?

Javascript print output one at a time instead of entire page at once?

Just playing around a bit, but noticed it's taking way too long for page to load, is there anyway to get it to print out one line at a time instead of having to wait till the entire page is loaded.
limits(){
var a = 0;
for (var i = 0; i < 1000; i++) {
for (var ii = 0; ii < 1000; ii++) {
document.getElementById('foo').innerHTML += "<p>" + a + "</p>";
a * 2;
}
}
}
Now how would I be able to control this better to where regardless of how long it takes to load print as soon as ready and even slowing it down would be fine.

The javascript method window.requestAnimationFrame(callback) will call your callback function on the next animation frame. It's commonly used for animation, and will probably work well for what you're doing.
To modify your code to use requestAnimationFrame, you have to make your function print a small chunk on its own, with a reference to know what chunk to print. If you stored your page contents in an array, for example, that could just be a starting index and a length. Since you are printing the increasing powers of 2, you can just pass in the last power of two and the number of lines you want to print for each run of the function.
You'll also need an exit condition -- a check within limits that if true, returns without requesting the next frame. I simply put a hard cap on the value of a, but you could also check that the index is less than array length (for my array of page contents idea above).
Because requestAnimationFrame passes in a function name as a callback, you can't pass arguments into it. Therefore, you have to use bind to sort of attach the values to the function. Then, within the function, you can access them using this. config is just an object to hold the initial arguments you want the function to have, and then you bind it, which allows you to access them within the function with this.numLines and this.a.
Then, when you request the next frame, you have to bind the values to limits again. If you are alright with keeping the arguments the same, you can just do limits.bind(this). But if you want to change them, you can create another object in a similar way to how I wrote config and bind that instead.
The following code seems to be a basic example of roughly what you're looking for:
var foo = document.getElementById('foo');
var maxA = 1000000000000000000000000000000000;
function limits() {
for(var i=0; i<this.numLines; ++i) {
foo.innerHTML += "<p>" + this.a + "</p>";
this.a *= 2;
if(this.a > maxA) {
return;
}
}
requestAnimationFrame(limits.bind(this));
}
config = {
numLines: 3,
a: 1
};
requestAnimationFrame(limits.bind(config));
And is implemented in JSFiddle here. I've also implemented a version where it puts each line at the top of the page (as opposed to appending it to the bottom), so that you can see it happening better (you can find that one here).

You can do something like this:
limits(){
var a = 0;
for (int i = 0; i < 1000; i++) {
for (int ii = 0; ii < 1000; ii++) {
setTimeout(function(){
document.getElementById('foo').innerHTML += "<p>" + a + "</p>";
a * 2;
}, 0);
}
}
}
You can adjust the time in the setTimeout, but even leaving it as zero will allow a more interactive experience even while the page builds. Setting it to 10 or 100 will of course slow it down considerably if you like.

Is there a limit on the number of members in a Javascript Set()? Or is this a bug in V8

Here's some simple Javascript code that repeatedly adds integers into a Set:
var i;
var limit = 1 << 24;
var s = new Set();
for (i = 0; i < limit + 10; i++) {
s.add(i);
if (i >= limit - 10) console.log ("Set size is now " + s.size)
}
When the set size grows to 2^24 exactly (which I've called "limit"), there is a
FATAL ERROR: invalid table size Allocation failed - process out of memory
The process isn't anywhere near running into an actual memory limit, and it's really suspicious that this occurs at exactly 2^24 elements. This happens using node.js, or if I run it inside Chrome. I've tried it on both Windows and Mac OSX (both 64 bit), and it seems to hit the wall at 2^24 elements when you store other more complex things in Set()s. I think Map() and its ilk all have the same issue.
I couldn't find anything about this limit in the documentation. Is it a bug?

Block "stop execution of this script" message

I have an array with 2000 arrays which each have 2000 values (to stock a 2000x2000 image) in javascript in an HTA. I have this code to test how many "blue" values there are in the array (the array's name is image):
var bluePixels = 0;
for(i = 0; i < image.length; i++){
for(j = 0; j < image[i].length; j++){
if(image[i][j] == "blue"){bluePixels = bluePixels + 1}
}
}
alert(bluePixels);
The problem is that it shows a message where it says something like "Stop execution of this script? A script on this page is slowing down Internet Explorer. If it continues, your computer might not answer." (I'm not sure of the exact words because my computer is in French) and then, if I click on "no", it does the alert(bluePixels) like it should but if I push on "yes" it doesn't. How can I block this message? (I know that there are workarounds like telling the user in the beginning to press "no" but I want a real solution)

For IE versions 4 to 8, you can do this in the registry. Open the following key in Regedit: HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Styles. If this key doesn't exist, create it. In this key, create a DWORD value called MaxScriptStatements and give it the value 0xFFFFFFFF (don't worry if the value changes automatically when you click on OK, that's normal).
You can program JavaScript to do this automatically:
var ws = new ActiveXObject("WScript.Shell");
ws.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\Styles\\","");
ws.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\Styles\\MaxScriptStatements",1107296255,"REG_DWORD");

Seems like you have an answer here
From the answer:
"The only way to solve the problem for all users that might be viewing your page is to break up the number of iterations your loop performs using timers, or refactor your code so that it doesn't need to process as many instructions."
So the first approach can be attained using a timeout for each such large iteration.

You need to split the 2000x2000 for-loop's up in smaller pieces of code, eg threads or processes, so the browsers maximum execution time not is becoming exhausted. Here the image array is parsed for one row at a time, controlled by a timer :
var bluePixels = 0,
timer,
i = 0;
function countBluePixels() {
for (var j = 0; j < image[i].length; j++){
if (image[i][j] == "blue") {
bluePixels = bluePixels + 1;
}
}
i=i+1;
if (i>image.length) {
clearInterval(timer);
alert(bluePixels);
}
}
timer = window.setInterval(countBluePixels, 0);
The code is the same, just splitted up in 2000 processes instead of 1.

how can website javascript code using same input data compute a different result depending on visitor?

The javascript code snippet below is on a website. Recently I've observed the code can produce different results for a visitor on the website than I obtain from my computer using the exact same data that the visitor input to the website. This seems to be visitor dependent (some visitors are fine). I've tried several computers/operating systems in my office, and they all produce the same (correct) results as each other, derived from the visitor's input data in question.
Part of the results (not shown below) provided by the website is a plot of the user's entered data, which I observe is always correct, so I know the visitor's input data they entered into the website (from which the javascript computation uses to compute a result) are interpreted correctly by their machine (I can see the plot the user receives (generated by auto-PDF email), and the same data entered in my computer produces the exact same plot for the entered data; just the results derived from this data are different).
In one case I analyzed, the visitor's incorrect data, mysteriously, was always a factor of 1.3 lower than the correct result. It doesn't seem like a rounding error or difference in 32b vs 64b OS.
Any ideas what could be causing such a thing? Is the code below not robust for all versions of javascript, or could different javascript versions product different results (seems hard to believe, but I'm using some fancy math below, maybe one of the mat functions is antiquated). Unfortunately I don't have access to a machine producing incorrect data to troubleshoot. I also don't know anything about the machine/OS/platform used by visitors (could be anything). Any ideas appreciated. I'm not that experienced with javascript (it could be something obvious below).
Thanks in advance.
function calculate(){
var fc=document.abcform.CF.value*1;
var of = new Array(20);
var pn = new Array(20);
var pj = new Array(19);
var cbox = new Array(20);
var alpha;
var con;
var segment;
var subttl=0;
of[0]=document.abcform.OS1.value*1; pn[0]=document.abcform.abc1.value*1;
of[1]=document.abcform.OS2.value*1; pn[1]=document.abcform.abc2.value*1;
of[2]=document.abcform.OS3.value*1; pn[2]=document.abcform.abc3.value*1;
of[3]=document.abcform.OS4.value*1; pn[3]=document.abcform.abc4.value*1;
of[4]=document.abcform.OS5.value*1; pn[4]=document.abcform.abc5.value*1;
of[5]=document.abcform.OS6.value*1; pn[5]=document.abcform.abc6.value*1;
of[6]=document.abcform.OS7.value*1; pn[6]=document.abcform.abc7.value*1;
of[7]=document.abcform.OS8.value*1; pn[7]=document.abcform.abc8.value*1;
of[8]=document.abcform.OS9.value*1; pn[8]=document.abcform.abc9.value*1;
of[9]=document.abcform.OS10.value*1; pn[9]=document.abcform.abc10.value*1;
of[10]=document.abcform.OS11.value*1; pn[10]=document.abcform.abc11.value*1;
of[11]=document.abcform.OS12.value*1; pn[11]=document.abcform.abc12.value*1;
of[12]=document.abcform.OS13.value*1; pn[12]=document.abcform.abc13.value*1;
of[13]=document.abcform.OS14.value*1; pn[13]=document.abcform.abc14.value*1;
of[14]=document.abcform.OS15.value*1; pn[14]=document.abcform.abc15.value*1;
of[15]=document.abcform.OS16.value*1; pn[15]=document.abcform.abc16.value*1;
of[16]=document.abcform.OS17.value*1; pn[16]=document.abcform.abc17.value*1;
of[17]=document.abcform.OS18.value*1; pn[17]=document.abcform.abc18.value*1;
of[18]=document.abcform.OS19.value*1; pn[18]=document.abcform.abc19.value*1;
of[19]=document.abcform.OS20.value*1; pn[19]=document.abcform.abc20.value*1;
cbox[0]=document.abcform.c1.checked; cbox[1]=document.abcform.c2.checked; cbox[2]=document.abcform.c3.checked;
cbox[3]=document.abcform.c4.checked; cbox[4]=document.abcform.c5.checked; cbox[5]=document.abcform.c6.checked;
cbox[6]=document.abcform.c7.checked; cbox[7]=document.abcform.c8.checked; cbox[8]=document.abcform.c9.checked;
cbox[9]=document.abcform.c10.checked; cbox[10]=document.abcform.c11.checked; cbox[11]=document.abcform.c12.checked;
cbox[12]=document.abcform.c13.checked; cbox[13]=document.abcform.c14.checked; cbox[14]=document.abcform.c15.checked;
cbox[15]=document.abcform.c16.checked; cbox[16]=document.abcform.c17.checked; cbox[17]=document.abcform.c18.checked;
cbox[18]=document.abcform.c19.checked; cbox[19]=document.abcform.c20.checked;
for (var i = 0; i <= 18; i++) { pj[i] = '' }
for (var j = 1; j <= 19; j++){
if (j == 1 || cbox[j]) {
alpha = (pn[j-1] - pn[j])/(10*(Math.LOG10E*Math.log(of[j]/of[j-1])));
con = (Math.pow(of[j-1],alpha))*(Math.pow(10,0.1*pn[j-1]));
if ((alpha <= (1 + 1e-14)) && (alpha >= (1 - 1e-14))) {
segment = con*Math.log(of[j]/of[j-1]); }
else { segment = (con/(1-alpha))*(Math.pow(of[j],1-alpha)-Math.pow(of[j-1],1-alpha)); }
pj[j-1] = round(1E12*(Math.sqrt(2*segment))/(2*Math.PI*fc));
subttl = subttl + Math.pow(pj[j-1],2);
} else {break;}
}
document.abcform.pj1.value=pj[0]; document.abcform.pj2.value=pj[1]; document.abcform.pj3.value=pj[2];
document.abcform.pj4.value=pj[3]; document.abcform.pj5.value=pj[4]; document.abcform.pj6.value=pj[5];
document.abcform.pj7.value=pj[6]; document.abcform.pj8.value=pj[7]; document.abcform.pj9.value=pj[8];
document.abcform.pj10.value=pj[9]; document.abcform.pj11.value=pj[10]; document.abcform.pj12.value=pj[11];
document.abcform.pj13.value=pj[12]; document.abcform.pj14.value=pj[13]; document.abcform.pj15.value=pj[14];
document.abcform.pj16.value=pj[15]; document.abcform.pj17.value=pj[16]; document.abcform.pj18.value=pj[17];
document.abcform.pj19.value=pj[18];
document.abcform.tj.value=round(Math.sqrt(subttl));
}
function round(x) { return Math.round(x*100000)/100000; }

Doesn't seem like a rounding error or
difference in 32b vs 64b OS.
Why not... this is exactly what it seems like. Maybe even a 16bit machine for that matter. You are doing lots of crazy floating point operations -- they typically perform lots of truncation and rounding.
Option two: The log or pow or sqrt functions are implemented differently on different browsers. Solution -- implement your own and see if you get the same "different" results.

Definitely sounds like rounding errors to me, and it doesn't matter what the underlying elements are (64 bit, 32 bit, implementations of pow, etc).
Consider:
alpha = (pn[j-1] - pn[j])/(10*(Math.LOG10E*Math.log(of[j]/of[j-1])));
(Math.pow(of[j-1],alpha))*(Math.pow(10,0.1*pn[j-1]))
That right there can have different results, since it's all floating math. You'll have to either use ints, or something like BigNumber.

In cases like that printf debugging is sometimes helpful - print out all the intermediate values (like alpha) for all the iterations and then compare the outputs to see where they are different. Gives you a starting point.

After debugging, it turns out this is related to a loss of precision by converting to scientific notation in code not shown above. Thus, it's a non-javascript issue (e.g. user error). Thanks for all of the insight above though.