Develop Reference

How to change the background color in Google Apps Script when looping over more than one condition and using two arrays as inputs?

I tried the code provided by #Cooper in another Stack Overflow thread. Here's what I did:
function testOfYourCode() {
var medianResults=[11.0,45.0,11.0,12.0];
var productType=["ProductA","ProductB","ProductC","ProductD"];
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Copyof01Summary');
var rg=sh.getDataRange();
var cA=rg.getBackgrounds();
var vA=rg.getValues();
for(let t=0;t<productType.length;t++) {
for(let m=0;m<medianResults.length;m++) {
vA.forEach(function(r, i) {
r.forEach(function(c, j) {
if (vA[i][1]==productType[t] && vA[i][6]<=medianResults[m]) {
cA[i][6]="#d9ead3"
} if (vA[i][1]==productType[t] && vA[i][6]>medianResults[m]) {
cA[i][6]="#f4cccc"
}
});
});
}
}
rg.setBackgrounds(cA);
}
For some reason, and I don't know why, the color formatting is not correct for ProductB. It's correct for all other product types but not for ProductB (see screenshot below). Why does this failure occur?
Update
I'd like to understand how to extend my code to change the background color in Google Apps Script when looping over more than one condition using two arrays as inputs.
Thanks to the help of #Cooper I managed to write this code that changes the background color based on the value in spreadsheet column 7.
// MY CODE THAT WORKS.
function randomcolors2d() {
var ss = SpreadsheetApp.getActive();
var sh = ss.getSheetByName('Sheet4');
var rg = sh.getDataRange();
var cA = rg.getBackgrounds();
var vA = rg.getValues();
vA.forEach(function(r, i) {
r.forEach(function(c, j) {
if (vA[i][6] <= 10) {
cA[i][6] = "#f4cccc"
} if (vA[i][6] > 10) {
cA[i][6] = "#d9ead3"
}
});
});
rg.setBackgrounds(cA);
}
However, my problem is that this simple rule does not suit my data. I have different product types in my data and thus need to do the above but iterate through different product types and key (median) values). In my case it's 4 product types and 4 median values. But this number can change, so I need a more flexible code that accounts for that.
Without any success, I tried to use only a single forEach-loop, to integrate another for-loop either before the forEach-loop or before the if-statements or use a combination of for-loop and map-function.
Here's just one example to make it more clear what I'm intending to do:
// CODE THAT DOES NOT WORK.
var medianResults = [11.0, 45.0, 11.0, 12.0]; // Remember, the length of these to variable can vary!
var productType = ["ProductA", "ProductB", "ProductC", "ProductD"];
// the two arrays I'd like to use for conditioning.
function randomcolors2d() {
var ss = SpreadsheetApp.getActive();
var sh = ss.getSheetByName('Sheet4');
var rg = sh.getDataRange();
var cA = rg.getBackgrounds();
var vA = rg.getValues();
for (v = 0; v < productType.length; v++) { // this does not work, but how to do it?
vA.forEach(function(r, i) {
r.forEach(function(c, j) {
if (vA[i][1] === productType[v] && vA[i][6] <= medianResults[v]) {
cA[i][6] = "#f4cccc"
} if (vA[i][1] === productType[v] && vA[i][6] > medianResults[v]) {
cA[i][6] = "#d9ead3"
}
});
});
}
rg.setBackgrounds(cA);
}
What can I try next?

How about this:
function randomcolors2d() {
var medianResults=[11.0,45.0,11.0,12.0];
var productType=["ProductA","ProductB","ProductC","ProductD"];
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Sheet4');
var rg=sh.getDataRange();
var cA=rg.getBackgrounds();
var vA=rg.getValues();
for(let t=0;t<productType.length;t++) {
for(let m=0;m<medianResults.length;m++) {
vA.forEach(function(r, i) {
r.forEach(function(c, j) {
if (vA[i][1]==productType[t] && vA[i][6]<=medianResults[m]) {
cA[i][6]="#f4cccc";//red
} if (vA[i][1]==productType[t] && vA[i][6]>medianResults[m]) {
cA[i][6]="#d9ead3";//green
}
});
});
}
}
rg.setBackgrounds(cA);
}
Perhaps this is what you require:
function testOfYourCode() {
var pA=[{type:"ProductA",medianResults:11.0},{type:"ProductB",medianResults:45.0},{type:"ProductC",medianResults:11.0},{type:"ProductD",medianResults:12.0}]
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Copyof01Summary');
var rg=sh.getDataRange();
var cA=rg.getBackgrounds();
var vA=rg.getValues();
pA.forEach(function(e,m) {
vA.forEach(function(r,i) {
r.forEach(function(c,j) {
if (vA[i][1]==pA[m].type && vA[i][6]<=pA[m].medianResults) {
cA[i][6]="#d9ead3"
} if (vA[i][1]==pA[m].type && vA[i][6]>pA[m].medianResults) {
cA[i][6]="#f4cccc"
}
});
});
});
rg.setBackgrounds(cA);
}
I was just about to give up when I realized that perhaps this is what you were trying to accomplish with those two 4 element arrays;
var pA=[{type:"ProductA",medianResults:11.0},{type:"ProductB",medianResults:45.0},{type:"ProductC",medianResults:11.0},{type:"ProductD",medianResults:12.0}]
If they're correlated to each product then indexing them through each of the products doesn't make any sense. That's where programming and sensible analysis have to come together.

Updating value in for loop / Reseting a for loop?

I'm working on my first school project so I don't have much experience in doing such web applications, that's why I decided to ask here.
How can I update the value in the for loop syntax or reset it entirely, so it iterates again, like I just reloaded it? I have another function that I decided not to show, simply because it would be useless to. What it does in the end is increments the taskCount.length by one. This part technically works but problem is, the function I'm going to show you now, once iterated, will always keep the default taskCount.length value, once the page is loaded, it never changes there. Is there any way I can update it?
Here's an example: The function above makes taskCount.length = '5' but when the page started it was taskCount.length = 4, and when I do alert(taskCount.length) from the console, I get 5. But the for loop doesn't want to change.
for (var i = 0; i < taskCount.length; i++) {
document.getElementsByClassName('task')[i].addEventListener('click', ((j) => {
return function() {
var shadow = document.createElement('div');
// Styling
var changingWindow = document.createElement('div');
// Styling
var changingTitle = document.createElement('p');
// Styling
var changingText = document.createElement('p');
// Styling
var changingTitleNode = document.createTextNode('Промяна');
var changingTextNode = document.createTextNode('Моля, изберете действие.');
var deleteTask = document.createElement('button');
var goUp = document.createElement('button');
var goDown = document.createElement('button');
var unchange = document.createElement('button');
// Styling
var deleteElementNode = document.createTextNode('Премахни задачата');
var goUpNode = document.createTextNode('Премести нагоре');
var goDownNode = document.createTextNode('Премести надолу');
var unchangeNode = document.createTextNode('Отказ');
var justBreak = document.createElement('br');
var justBreakAgain = document.createElement('br');
var justBreakOneMoreTime = document.createElement('br');
body.appendChild(shadow);
shadow.appendChild(changingWindow);
changingWindow.appendChild(changingTitle);
changingTitle.appendChild(changingTitleNode);
changingWindow.appendChild(changingText);
changingText.appendChild(changingTextNode);
changingWindow.appendChild(deleteTask);
deleteTask.appendChild(deleteElementNode);
deleteTask.onclick = function() {
document.getElementsByClassName('task')[j].parentNode.removeChild(document.getElementsByClassName('task')[j]);
shadow.parentNode.removeChild(shadow);
localStorage.setItem("listContent", document.getElementById('list').innerHTML);
}
changingWindow.appendChild(justBreak);
changingWindow.appendChild(goUp);
goUp.appendChild(goUpNode);
goUp.onclick = function() {
if (j !== 0) {
var saveThisTaskValue = document.getElementsByClassName('task')[j].innerHTML;
var savePreviousTaskValue = document.getElementsByClassName('task')[j - 1].innerHTML;
document.getElementsByClassName('task')[j].innerHTML = savePreviousTaskValue;
document.getElementsByClassName('task')[j - 1].innerHTML = saveThisTaskValue;
}
shadow.parentNode.removeChild(shadow);
localStorage.setItem("listContent", document.getElementById('list').innerHTML);
}
changingWindow.appendChild(justBreakAgain);
changingWindow.appendChild(goDown);
goDown.appendChild(goDownNode);
goDown.onclick = function() {
if (j !== document.getElementsByClassName('task').length - 1) {
var saveThisTaskValue = document.getElementsByClassName('task')[j].innerHTML;
var saveNextTaskValue = document.getElementsByClassName('task')[j + 1].innerHTML;
document.getElementsByClassName('task')[j].innerHTML = saveNextTaskValue;
document.getElementsByClassName('task')[j + 1].innerHTML = saveThisTaskValue;
}
shadow.parentNode.removeChild(shadow);
localStorage.setItem("listContent", document.getElementById('list').innerHTML);
}
changingWindow.appendChild(justBreakOneMoreTime);
changingWindow.appendChild(unchange);
unchange.appendChild(unchangeNode);
unchange.onclick = function() {
shadow.parentNode.removeChild(shadow);
}
}
})(i))
}

As a matter of the page reloading, you can always save the value as a cookie and reuse it again and again. You can update it whenever you want.

I don't fully understand you question, but maybe some recursion is what you need. Something along the lines of:
loop(5);
function loop(xTimes) {
for (var i = 0; i < xTimes; i++) {
if (newXTimes !== xTimes) {
loop(newXtimes);
break;
}
}
}
Maybe set newxTimes as a global variable that can be accessed inside loop.

In case someone "from the future" reads this question and it doesn't have any answers, I came up with the solution to reload the page everytime you change the value. Still, I'd like to do it without reloading.

How can I display my var array name in HTML textblock?

I want to display my var array names in a textblock. These need to change depending on what box is ticked in my form.
Now I can show the values in the array, but I need to display the actual name too. I am VERY new to coding, and I have trouble finding the right words to describe my problem, thus not finding any solution. I hope you can help me out.
var color_prices = new Array();
color_prices["Orange"]=1;
color_prices["Blue"]=2;
color_prices["Green"]=3;
function getColorPrice()
{
var ColorPrice=0;
var theForm = document.forms["order-form"];
var selectedColor = theForm.elements["COLOR"];
for(var i = 0; i < selectedColor.length; i++)
{
if(selectedColor[i].checked)
{
ColorPrice = color_prices[selectedColor[i].value];
break;
}
}
return ColorPrice;
}
var colorPrice = getColorPrice();
document.getElementById('colorPrice').innerHTML = colorPrice.toFixed(2);
Right now I 'stole' some code online to display the value of "orange" in my html (so "1") and this works but I have no idea how to display the value "orange" in my html.
I hope I explained it correctly.

A solution could be to change your ColorPrice variable to be an object to be able to store the color price and the color name, in my example I'm also changing the name of the variable to colorDetails to be more descriptive about what is containing
var color_prices = new Array();
color_prices["Orange"]=1;
color_prices["Blue"]=2;
color_prices["Green"]=3;
function getColorDetails()
{
//here we rename the variable and convert from integer to object
var colorDetails = {
price: 0,
name: undefined
};
var theForm = document.forms["order-form"];
var selectedColor = theForm.elements["COLOR"];
for(var i = 0; i < selectedColor.length; i++)
{
if(selectedColor[i].checked)
{
//here we store the color price inside colorDetails
colorDetails.price = color_prices[selectedColor[i].value];
//and we add this new line where we save the name of the color
colorDetails.name = selectedColor[i].value;
break;
}
}
return colorDetails;
}
var colorDetails = getColorDetails();
document.getElementById('colorPrice').innerHTML = colorDetails.name + ": " + colorDetails.price.toFixed(2);

How to get random images from an array and show name of image in alert without repeat of same image using JQUERY

I am developing one project in that i have requirement of get images randomly so i want alert of 9 images every time alert should show random image and it should not repeat but in my case i am getting alert of Repetative image and instead of 4 times alert I am getting 8 alerts, here i want count_time=4 which i have declared in variable below my jquery code to get random image in each alert without repeat.
<script>
//alert shoud get only 4 times because count_time is 4
$("body").on('click','.cell',function(){
var images_var = ["1.jpg", "2.jpg","3.jpg","4.jpg"];
var count_time=4;
var test = [];
var useNumbers = {};
for (i = 1; test.length < count_time; i++) {
var rng = Math.floor((Math.random() * count_time) + 1);
var random = images_var[Math.floor(Math.random()*images_var.length)];
alert(random);
if (!useNumbers[rng]) {
test.push(rng);
useNumbers[rng] = true;
}
}
});
</script>

Finally solved my issue after observing carefully and applying conidtions
<script>
$("body").on('click','.cell',function(){
var images_var = ["1.jpg", "2.jpg","3.jpg","4.jpg"];
var count_time=4;
var test = [];
var img_push=[];
var useNumbers = {};var random_img={};
for (i =1; test.length < count_time; i++) {
var rng = Math.floor((Math.random() * count_time));
var random = images_var[Math.floor(Math.random()*images_var.length)];
if ((!useNumbers[rng]) && (!random_img[random])) {
test.push(rng);
img_push.push(random);
useNumbers[rng] = true;
random_img[random] = true;
alert(random);
}
}
});
</script>

Accessing Stored Object

I have an object "Driver" defined at the beginning of my script as such:
function Driver(draw, name) {
this.draw = draw;
this.name = name;
}
I'm using this bit of JQuery to create new drivers:
var main = function () {
// add driver to table
$('#button').click(function ( ) {
var name = $('input[name=name]').val();
var draw = $('input[name=draw]').val();
var draw2 = "#"+draw;
var name2 = "driver"+draw
console.log(draw2);
console.log(name2);
if($(name2).text().length > 0){
alert("That number has already been selected");}
else{$(name2).text(name);
var name2 = new Driver(draw, name);}
});
That part is working great. However, when I try later on to access those drivers, the console returns that it is undefined:
$('.print').click(function ( ) {
for(var i=1; i<60; i++){
var driverList = "driver"+i;
if($(driverList.draw>0)){
console.log(driverList);
console.log(driverList.name);
}
If you're interested, I've uploaded the entire project I'm working on to this site:
http://precisioncomputerservices.com/slideways/index.html
Basically, the bottom bit of code is just to try to see if I'm accessing the drivers in the correct manner (which, I'm obviously not). Once I know how to access them, I'm going to save them to a file to be used on a different page.
Also a problem is the If Statement in the last bit of code. I'm trying to get it to print only drivers that have actually been inputed into the form. I have a space for 60 drivers, but not all of them will be used, and the ones that are used won't be consecutive.
Thanks for helping out the new guy.

You can't use a variable to refer to a variable as you have done.
In your case one option is to use an key/value based object like
var drivers = {};
var main = function () {
// add driver to table
$('#button').click(function () {
var name = $('input[name=name]').val();
var draw = $('input[name=draw]').val();
var draw2 = "#" + draw;
var name2 = "driver" + draw
console.log(draw2);
console.log(name2);
if ($(name2).text().length > 0) {
alert("That number has already been selected");
} else {
$(name2).text(name);
drivers[name2] = new Driver(draw, name);
}
});
$('.print').click(function () {
for (var i = 1; i < 60; i++) {
var name2 = "driver" + i;
var driver = drivers[name2];
if (driver.draw > 0) {
console.log(driver);
console.log(driver.name);
}