I just wrote the code below where I form the Roman numeral array by first pushing the M’s, then the D’s etc and the last to be pushed is I’s.
However, after pushing the M’s and before adding anything else to the Roman numeral array, when I console.log the array in either Firefox or Google, it returns the completed array instead of an array that only contains M’s.
However in Codepen (https://codepen.io/pen/?editors=1112), the console.log after the pushing of the M’s shows only the M’s present in the array.
Could someone please explain 1) why does Firefox and Chrome behave this way?
and 2) Why does Firefox and Chrome behave differently than Codepen?
The Javascript code is:
function convertToRoman(num) {
var singles = num % 5;
var fives = Math.floor((num % 10) / 5);
var tens = Math.floor((num % 50) / 10);
var fifties = Math.floor((num % 100) / 50);
var hundreds = Math.floor((num % 500) / 100);
var fivehunds = Math.floor((num % 1000) / 500);
var thousands = Math.floor((num) / 1000);
console.log("the singles count is: ", singles);
console.log("the fives count is: ", fives);
console.log("the tens count is: ", tens);
console.log("the fifties count is: ", fifties);
console.log("the hundreds count is: ", hundreds);
console.log("the fivehunds count is: ", fivehunds);
console.log("the thousands count is: ", thousands);
var romarr = [];
for (var m = 1; m <= thousands; m++) {
romarr.push("M");
}
console.log("1000's array is: ", romarr);
// Why is the completed array displayed instead of the array with M's only????
if (fivehunds == 1) {
romarr.push("D");
}
console.log("500's array is: ", romarr);
for (var k = 1; k <= hundreds; k++) {
romarr.push("C");
}
console.log("100's array is: ", romarr);
if (fifties == 1) {
romarr.push("L");
}
console.log("50's array is: ", romarr);
for (var j = 1; j <= tens; j++) {
romarr.push("X");
}
console.log("10's array is: ", romarr);
if (fives == 1) {
romarr.push("V");
}
console.log("5's array is: ", romarr);
for (var i = 1; i <= singles; i++) {
romarr.push("I");
}
console.log("final array is: ", romarr);
num = romarr.join("");
console.log("the joined array is: ", num);
return num;
}
convertToRoman(1023);
As I said, in Firefox and Chrome (but not CodePen), the console.log shows the following:
the singles count is: 3
app.js:10:5
the fives count is: 0
app.js:11:5
the tens count is: 2
app.js:12:5
the fifties count is: 0
app.js:13:5
the hundreds count is: 0
app.js:14:5
the fivehunds count is: 0
app.js:15:5
the thousands count is: 1
app.js:16:5
1000’s array is:
Array(6) [ “M”, “X”, “X”, “I”, “I”, “I” ]
app.js:23:4
500’s array is:
Array(6) [ “M”, “X”, “X”, “I”, “I”, “I” ]
app.js:28:5
100’s array is:
Array(6) [ “M”, “X”, “X”, “I”, “I”, “I” ]
app.js:33:5
50’s array is:
Array(6) [ “M”, “X”, “X”, “I”, “I”, “I” ]
app.js:38:5
10’s array is:
Array(6) [ “M”, “X”, “X”, “I”, “I”, “I” ]
app.js:43:5
5’s array is:
Array(6) [ “M”, “X”, “X”, “I”, “I”, “I” ]
app.js:47:6
final array is:
Array(6) [ “M”, “X”, “X”, “I”, “I”, “I” ]
app.js:51:1
the joined array is: MXXIII
Why does Firefox and Chrome behave this way?
Why does Firefox and Chrome behave differently than Codepen?