I want a filter so that you can see recipes with different properties or not. This works for the checkboxes/radiobuttons but not for the slider. The slider doesn't work anyway, only if I've turned one of the filters above the slider will make sure all recipes are visible again.
The slider is based on the number of people in a recipe.
I would like if I use the slider and then one of the above options to be filtered and then filtered again. Or when I use one of the above options, filter first and when I use the slider, filter again.
euroFilter();
valueUpdater();
function euroFilter() {
$("#slider").on("change", function() {
var personCurrent = parseInt(
$("#personCurrent")
.text()
.substring(2, 4)
);
var allProducts = $("#receptenContainer a");
for (var i = 0; i < allProducts.length; i++) {
var receptPerson = parseInt($(allProducts[i])[0].dataset.persoon);
if (receptPerson > personCurrent) {
$(allProducts[i]).hide();
} else {
$(allProducts[i]).show();
}
}
});
}
function valueUpdater() {
var slider = d.getElementById("slider");
var output = d.getElementById("personCurrent");
slider.oninput = function() {
output.innerHTML = "( " + this.value + " )";
};
}
});
https://codepen.io/fe-chucky/pen/WNvKZMm
There is one error in the following function.
function valueUpdater() {
var slider = d.getElementById("slider");
var output = d.getElementById("personCurrent");
slider.oninput = function() {
output.innerHTML = "( " + this.value + " )";
};
It gives error because 'd' is not defined. Instead of d type document and it works.
function valueUpdater() {
var slider = document.getElementById("slider");
var output = document.getElementById("personCurrent");
slider.oninput = function() {
output.innerHTML = "( " + this.value + " )";
};
}
------------- Edited -------------
I am using a single function to filter recipes. The function is called on checkbox click as well as slider change events. I took parts of your code as well as some variable names. I also changed checkboxes names. Changed them to r-sort[], b-sort[] from r-sort, b-sort So that they can be recognized as arrays.
$(document).ready(function() {
if (typeof receptObject == "undefined") return false;
var receptAantal = receptObject.recepten.length;
if (receptAantal <= 0) return false;
var location = window.location.origin;
var titleLengte = 42;
var descriptionLengte = 90;
$("#hideMe").remove();
$asideMenu =
"<aside>" +
'<form><fieldset><div class="recept-met"><label id="filterReceptMet"></label></div>' +
'<div class="kooktecnhiek"><label id="filterkooktechniek"></label></div>' +
"<div>" +
'<label id="filterAantalPersonen"></label>' +
'<span id="personCurrent"></span>' +
'<input id="slider" type="range" min="1" max="6" name="p-sort" value="1" step="1" >' +
"</div>" +
"</div>" +
"</fieldset></form></aside>";
$("#selRecepten").append('<div id="selReceptenContainer"></div>');
$("#recepten").append($asideMenu);
$("#recepten").append('<div id="receptenContainer"></div>');
var kooktechnieken = [];
var menugangen = [];
var personen = [];
var receptenMet = [];
for (recept of receptObject.recepten) {
let url,
kooktechniekToFind,
menugangToFind,
personenToFind,
receptMetToFind,
titleShort,
descriptionShort,
card1,
card2;
url = recept.title.toLowerCase();
url = url.replace(/ - /g, "_");
url = url.replace(/ /g, "_");
url = escape(url); // mijn%20document
kooktechniekToFind = recept.kooktechniek;
if (kooktechnieken.indexOf(kooktechniekToFind) == -1) {
kooktechnieken.push(kooktechniekToFind);
}
// menugangToFind = recept.menugang;
// if (menugangen.indexOf(menugangToFind) == -1){
// menugangen.push(menugangToFind);
// }
personenToFind = recept.persoon;
if (personen.indexOf(personenToFind) == -1) {
personen.push(personenToFind);
}
receptMetToFind = recept.receptMet;
if (receptenMet.indexOf(receptMetToFind) == -1) {
receptenMet.push(receptMetToFind);
}
titleShort = recept.title;
if (titleShort.length > titleLengte) {
titleShort = titleShort.substring(0, titleLengte) + "...";
}
descriptionShort = recept.description;
if (descriptionShort.length > descriptionLengte) {
let mijnIndex = descriptionShort.lastIndexOf(" ", descriptionLengte);
descriptionShort = descriptionShort.substring(0, mijnIndex) + " ...";
}
card2 =
'<a href="" class="recept"' +
'id="' +
recept.id +
'" ' +
'data-kooktechniek="' +
recept.kooktechniek +
'" ' +
'data-persoon="' +
recept.persoon +
'" ' +
'data-recept-met="' +
recept.receptMet +
'" ' +
'title="' +
recept.title +
'" ' +
'data-kooktechniek-flag="0" data-persoon-flag="0" data-recept-met-flag="0" >' +
'<div class="card">' +
"<h2>" +
'<ul class="info-recept"><li class="' +
recept.kooktechniek +
'">' +
recept.kooktechniek +
'</li><li class="' +
recept.receptMet +
'">' +
recept.receptMet +
'</li><li class="bereid">' +
recept.persoon +
"<span>" +
recept.persoon +
" persons" +
"</span>" +
"</li></ul>" +
titleShort +
"</h2>" +
'<ul class="ingredienten"><li>' +
recept.ingredienten[0] +
"</li><li>" +
recept.ingredienten[1] +
"</li><li>" +
recept.ingredienten[2] +
"</li><li>" +
recept.ingredienten[3] +
"</li><li>" +
recept.ingredienten[4] +
"</li></ul>" +
'<p class="button">' +
titleShort +
" maken" +
"</p>" +
"</div></a>";
$("#receptenContainer").append(card2);
}
var checkboxKook = "";
for (kooktechniek of kooktechnieken) {
checkboxKook +=
'<div class="cbox"><input type="checkbox" name="b-sort[]" value="' +
kooktechniek +
'" >' +
'<label class="' +
kooktechniek +
'">' +
kooktechniek +
"</label></div>";
}
$("#filterkooktechniek").after(checkboxKook);
var checkboxRecept = "";
for (receptMet of receptenMet) {
checkboxRecept +=
'<div class="cbox"><input type="checkbox" name="r-sort[]" value="' +
receptMet +
'" >' +
receptMet +
"</div>";
}
$("#filterReceptMet").after(checkboxRecept);
$("aside input:checkbox").on("click", function(e) {
filterRecipie();
}); // einde events
euroFilter();
valueUpdater();
function euroFilter() {
$("#slider").on("change", function() {
//$('#slider').bind('change',function(){
var personCurrent = parseInt(
$("#personCurrent")
.text()
.substring(2, 4)
);
filterRecipie();
});
}
function valueUpdater() {
var slider = document.getElementById("slider");
var output = document.getElementById("personCurrent");
slider.oninput = function() {
output.innerHTML = "( " + this.value + " )";
};
}
}); // einde document ready
function filterRecipie() {
console.log("HERE");
var mainIn = new Array();
var cookTech = new Array();
var aantalkooktechniek = 0;
var aantalReceptMet =0;
$("input[name='r-sort[]']").each(function () {
if ($(this).prop('checked')==true){
//console.log($(this).val());
mainIn.push($(this).val());
aantalReceptMet = 1;
}
});
$("input[name='b-sort[]']").each(function () {
if ($(this).prop('checked')==true){
//console.log($(this).val());
cookTech.push($(this).val());
aantalkooktechniek = 1;
}
});
var personCurrent = parseInt($("#personCurrent").text().substring(2, 4) );
if(! personCurrent) { personCurrent = 0; aantalPersonen = 0; } else {aantalPersonen = 1; }
var alleCards = $("#receptenContainer a");
alleCards.each(function() {
var card = $(this);
var receptPerson = card.attr("data-persoon");
if (cookTech.indexOf(card.attr("data-kooktechniek") ) >= 0 || aantalkooktechniek ==0) {
card.attr("data-kooktechniek-flag", "1");
}
else {
card.attr("data-kooktechniek-flag", "0");
}
if (mainIn.indexOf(card.attr("data-recept-met") ) >= 0 || aantalReceptMet == 0) {
card.attr("data-recept-met-flag", "1");
}
else {
card.attr("data-recept-met-flag", "0");
}
if (receptPerson >= personCurrent) {
card.attr("data-persoon-flag", "1");
}
else {
card.attr("data-persoon-flag", "0");
}
if( card.attr("data-persoon-flag")=="1" && card.attr("data-recept-met-flag") == "1" && card.attr("data-kooktechniek-flag") == "1" ) {
// show this
console.log("This matches on ALL count!!");
card.show();
}
else {
// hide this
card.hide();
console.log("This does not meet requirements!!");
}
}); // einde each (card) product
}
var receptObject =
'{"recepten":[' +
'{ "id" : "1", "title" : "Bamisoep", "receptVan" : "Nigella Lawson", "kooktechniek" : "bakken", "receptMet" : "vis", "persoon" : "4", "tijdMin" : "5", "menugang" : "voorgerecht", "image" : "bamisoep.jpg", "bgimage" : "recept-bami-soep.jpg", "ingredienten" : ["1 mienestje","1 bosje Lente ui","1 bosje Koriander","1 Chilipeper","Miso bouillon","Zalmfilet"], "description" : "Bereid de mie volgens de aanwijzingen op de verpakking, giet af, spoel af onder de koude kraan en zet opzij tot gebruik. Fruit de ui en knoflook in de olie tot de ui glazig is en schep het vlees erdoor. Bak kort mee en voeg 2 theelepels gemalen witte peper toe. Giet de bouillon erbij, breng aan de kook en laat op laag vuur 5 minuten doorkoken. Roer de prei en bladselderij erdoor. Verdeel de mie over soepkommen en schenk de bouillon met vlees en groenten erover. Garneer met gebakken uitjes."},' +
'{ "id" : "34", "title" : "Thaise kip", "receptVan" : "Nigella Lawson", "kooktechniek" : "oven", "receptMet" : "vlees", "persoon" : "4", "tijdMin" : "30", "menugang" : "hoofdgerecht", "image" : "thaisekip.jpg", "bgimage" : "recept-thaise-kip.jpg", "ingredienten" : ["600 gr. kipfilet","Paprika groen/geel/rood","1 bosje Koriander","1 zakje cashewnoten","250 gr. shi-take"], "description" : "Verwarm de oven voor op 190 °C. Maal de rode pepers, santen, het limoenraspsel en -sap en de koriander in de keukenmachine tot een gladde pasta. Maak het vel aan de bovenkant van de kip wat losser en druk de wijs- en middelvinger eronder zodat er een zakje ontstaat. Maak twee inkepingen in de bouten. Druk het grootste deel van de pasta in het zakje onder het vel en wrijf de resterende pasta over de bouten. Leg de schijfjes limoen onder in een braadslee en leg de kip erop. Leg een vel aluminiumfolie erover en braad de kip 40 minuten in de oven. Neem hem uit de oven, verwijder de aluminiumfolie en bedruip de kip. Zet de kip weer in de oven en braad hem onafgedekt nog eens 30-40 minuten; bedruip de kip in die tijd af en toe. Neem de kip uit de oven en laat hem 5 minuten afkoelen. Verdeel de kip over vier warme borden."},' +
'{ "id" : "35", "title" : "Tagliatelle", "receptVan" : "Jamie Oliver", "kooktechniek" : "koken", "receptMet" : "vegetarisch", "persoon" : "6", "tijdMin" : "40", "menugang" : "hoofdgerecht", "image" : "tagliatelle.jpg", "bgimage" : "recept-tagliatelle.jpg", "ingredienten" : ["200 gr. aardappelen","400 gr. tagliatelle","Handje haricots verts","Parmezaanse kaas","Pijnboompitten","Teentje knoflook"], "description" : "Stamp de helft van de pijnboompitten fijn en doe ze met de andere, niet-fijngestampte pijnboompitten, het citroensap en de geraspte citroenschil, de fijngehakte peterselie en de olijfolie in een grote vuurvaste schaal. Roer alles door elkaar en doe de Parmezaanse kaas en pecorino erbij. Als het goed is heb je nu een vrij dikke saus, die je eigenlijk meer als een soort dressing moet zien. Proef hem daarom en bedenk of de verschillende smaken tot hun recht komen. Ik wil dat je de saus zodanig in evenwicht brengt dat je een vrij zurige smaak krijgt, omdat de smaak van de citroen wanneer de saus opwarmt en de kaas smelt, aanzienlijk milder wordt. Breng de saus op smaak met wat zwarte peper uit de molen. Proef nogmaals en als de balans nog niet helemaal in orde is, dan doe je er gewoon nog wat olie en Parmezaanse kaas bij. Breng een grote pan water met wat zout aan de kook voor de pasta. Zet de schaal met saus op de pan terwijl het water opwarmt - dat haalt de kou uit de saus en warmt hem alvast een klein beetje op. Haal de schaal zodra het water begint te koken van de pan en doe de pasta in het water. Kook de pasta volgens de aanwijzingen op de verpakking, laat de pasta in een vergiet uitlekken en bewaar een klein beetje van het kookvocht. Hussel de pasta door de saus en voeg een beetje van het kookvocht toe om de pasta smeuïg te maken. De hitte van de pasta zorgt ervoor dat de kaas smelt en de heerlijke saus een mooi laagje om de pastavormpjes vormt. Als je de saus te dik vindt moet je er wat extra kookvocht bij doen. Het is niet de bedoeling dat de saus plakkerig en dik is, maar juist ongelofelijk zacht, fris en geurig. Proef nog een laatste keer of de smaken perfect in evenwicht zijn en serveer de tagliatelle direct, met wat vers geschaafde Parmezaanse kaas en wat peterselie erover gestrooid."},' +
'{ "id" : "36", "title" : "Mug cake", "receptVan" : "Yotam Ottolenghi", "kooktechniek" : "oven", "receptMet" : "vegetarisch", "persoon" : "1", "tijdMin" : "10", "menugang" : "nagerecht", "image" : "mugcake.jpg", "bgimage" : "recept-mugcake.jpg", "ingredienten" : ["1 eetlepel havermout","4 eetlepels bloem", "2 eetlepels rietsuiker", "1 snufje kaneelpoeder", "1 theelepel vanillesuiker", "15 g licht gezouten boter"], "description" : "Meng de ijskoude, licht gezouten boter, de havermout, de bloem, de rietsuiker en de amandelen door elkaar. Schil de halve appel, verwijder het klokhuis en snijd hem in blokjes. In een beker: vermeng de appelstukjes, het citroensap, de vanillesuiker of de ahornsiroop, 1 eetlepel water en het kaneelpoeder. Zet de beker 3 minuten in de magnetron (800 watt). Schep de crumble op het appelmengsel. Zet de mug cake nu 2 minuten en 30 seconden in de magnetron (800 watt)."},' +
'{ "id" : "125", "title" : "Pulled zalm", "receptVan" : "Jamie Oliver", "kooktechniek" : "bakken", "receptMet" : "vis", "persoon" : "6", "tijdMin" : "45", "menugang" : "hoofdgerecht", "image" : "pulledzalm.jpg", "bgimage" : "recept-pulled-zalm.jpg", "ingredienten" : ["300g zeezout","80g rietsuiker", "2 citroenen", "1kg zalmfilet, wild, met vel", "1 citroen", "dille"], "description" : "Meng zeezout, rietsuiker en citroenrasp en smeer hier de zalm goed mee in. Laat afgedekt een uur in de koelkast pekelen. Spoel schoon onder de kraan en dep goed droog. Strooi de rookmot op de kolen, leg direct de zalm op de huid in de barbecue (temperatuur van 80 °C | vuur, indirect) en laat 30 minuten roken. Zorg ervoor dat de temperatuur niet boven 60 °C komt. Laat de zalm even uitdampen en trek voorzichtig met de vingers de segmenten uit elkaar. Wat mij betreft geen saus, alleen een beetje citroensap en zwarte peper. Garneer met een paar pluimpjes dille."},' +
'{ "id" : "3584", "title" : "Biryani", "receptVan" : "Jamie Oliver", "kooktechniek" : "bakken", "receptMet" : "vis", "persoon" : "5", "tijdMin" : "50", "menugang" : "hoofdgerecht", "image" : "biryani.jpg", "bgimage" : "recept-biryani.jpg", "ingredienten" : ["500g witvisfilets","Kurkuma", "limoensap", "Basmatirijst", "Rozijnen", "Cashewnoten"], "description" : "Verhit 1 eetlepel ghee in een grote pan met dikke bodem op matig vuur, bak de rijst ongeveer 10 minuten, voeg naar smaak zout toe en doe er 1 theelepel kurkuma en 1 liter heet water bij. Roer zachtjes en breng aan de kook. Draai het vuur laag, en laat de rijst ongeveer 15 minuten met deksel koken tot alle water geabsorbeerd is. Verhit 4 eetlepels ghee in een koekenpan op matig laag vuur, doe er de rozijnen bij, roerbak ze ongeveer 1 minuut en schep ze met een schuimspaan uit de pan. Doe de cashewnoten in de pan, roerbak ze ongeveer 1 minuut, of tot ze bruin zijn, en schep ze met een schuimspaan uit de pan. Doe de uien in de pan en bak ze in ongeveer 5-7 minuten goudbruin. Draai het vuur laag, voeg het chilipoeder, de koriander, de rest van de kurkuma, 4 theelepels water en de hele specerijen toe, en blijf ongeveer 2 minuten roeren. Doe er de stukjes vis bij, voeg naar smaak zout toe, en bak ze ongeveer 5 minuten. Giet 250 ml water in de pan, breng aan de kook en doe er de tomaten bij. Draai het vuur laag, giet er de yoghurt bij en laat het mengsel 5 minuten pruttelen tot de saus mooi dik is. Kwast een pan met dikke bodem in met een beetje ghee, schep er een laagje vis in, dek de stukjes vis af met een laagje rijst, en strooi er wat rozijnen en cashewnoten over. Herhaal dit proces tot de vis en rijst op zijn en strooi er als laatste een laagje rozijnen en cashewnoten op. Leg een deksel op de pan en zet hem ongeveer 5 minuten op een bakplaat op heel laag vuur. Je kunt hem eventueel ook zonder bakplaat op heel laag vuur zetten."},' +
'{ "id" : "3852", "title" : "Bami Goreng", "receptVan" : "Nigella Lawson", "kooktechniek" : "koken", "receptMet" : "vegetarisch", "persoon" : "3", "tijdMin" : "35", "menugang" : "hoofdgerecht", "image" : "bami.jpg", "bgimage" : "recept-bami-goreng.jpg", "ingredienten" : ["500g bami","2 uien","1 prei","winterwortel", "witte kool", "ketjap manis", "sesamolie"], "description" : "Kook de bami volgens de aanwijzingen op de verpakking. Maak in een tjobeh of foodprocessor de rode ui, knoflook, lombok, djahé, djinten en ketumbar fijn tot een gladde boemboe. Verhit 2 eetlepels olie in een wok en fruit de uien lichtbruin aan. Voeg de boemboe toe en bak nog 3 minuten. Voeg dan de gesneden groenten en een groot deel van de gehakte selderij toe, bak even goed door en meng daarna de zoete en zoute ketjap ketjap en de sesamolie erdoor. Schep de gekookte bami in kleine porties door het mengsel in de wok. Bak daarna nog 2 minuten hard door. Garneer de bami goreng met de rest van de gehakte selderij."},' +
'{ "id" : "8002", "title" : "Yakitori", "receptVan" : "Nigella Lawson", "kooktechniek" : "oven", "receptMet" : "vlees", "persoon" : "4", "tijdMin" : "25", "menugang" : "voorgerecht", "image" : "yakatori.jpg", "bgimage" : "recept-yakitori.jpg", "ingredienten" : ["500g lamsvlees","bosje koriander","3 takjes munt","ras-el-hanout","komijnpoeder","1 eiwit"], "description" : "Snijd het lamsvlees in stukjes van 2 à 3 cm. Maak het vlees fijn in de keukenmachine met de verse kruiden, de knoflook, de specerijen, 1 theelepel zout, 1 theelepel zwarte peper en ten slotte het eiwit. Vorm in de holte van je hand balletjes van dit mengsel en rol ze door de bloem. Rijg twee balletjes aan elke bamboe prikker en knijp ze rondom goed aan tegen het stokje, zodat ze tijdens het roosteren niet opengaan. Voeg nog een eiwit toe als het mengsel te droog is. Roer de ingrediënten voor de saus heel goed door elkaar. Rooster de yakitori 5 minuten, draai ze regelmatig om en besprenkel telkens met de saus. Dien ze op met de rest van de saus."},' +
'{ "id" : "10058", "title" : "Cheesecake", "receptVan" : "Yotam Ottolenghi", "kooktechniek" : "koken", "receptMet" : "vegetarisch", "persoon" : "1", "tijdMin" : "10", "menugang" : "nagerecht", "image" : "cheesecake.jpg", "bgimage" : "recept-cheesecake.jpg", "ingredienten" : ["2 digestivekoekjes","25g aardbeien", "15g gezouten boter", "15g poedersuiker", "Mascarpone"], "description" : "Doe de digestives in een diepvrieszakje. Duw de lucht uit het zakje, sluit dit en verkruimel de koekjes door er met een deegroller op te slaan. Doe de kruimels uit het zakje over in een schaaltje, doe de boter erbij en wrijf die er met je vingers door tot je een samenhangend geheel hebt. Schep in een schaaltje of glas en druk het mengsel stevig aan op de bodem. Pureer het grootste deel van de aardbeien en de poedersuiker met een staafmixer of vork. Roer de roomkaas erdoor en schep dit mengsel op de koekjesbodem. Leg de achtergehouden gehalveerde aardbeien erop. Eet meteen of laat in ongeveer 20 minuten in de koelkast iets steviger worden."}' +
"]}";
receptObject = JSON.parse(receptObject);
I had another post with my project (container bound script) but this time I've tried to do the other way when I modify a Google Doc table section (when I tick in column J) it will modify the line in the Google Sheet because each line corresponds to a Google Doc project. It's the column J; I set a trigger to view the Google Doc in the same window and I can modify inside the thing is that when I close the Google Doc it's not modifying instantly the line of the Google Sheet.If I tick another time ; this is the one moment it modifies the line so the problem is that it has a delay of a tick. To see it :
1) log google make copy Tools -> Script editor set trigget view_doc_and_edit -> from spreadsheet on edit >>>
2) now if you click for a doc in the colum J you can see the google doc corresponding and we can modify it
3) we close we look in the table nothing changed and if we click another time the same place(row) it will change the row.
I know that for the Google Doc onEdit doesn't exist and I've tried to do by this way any idea is welcomed to modify in the same time to have an interactive tool
This is my project
https://docs.google.com/spreadsheets/d/1k_kj98U__0Bk44gh0qRFpaVx0ru3sN1pSPGiMQwimxo/edit?usp=sharing
var TITLE = 'Show Google Doc';
var SPREADSHEET_ID = "1k_kj98U__0Bk44gh0qRFpaVx0ru3sN1pSPGiMQwimxo"; // = assign your spreadsheet id to this variable
var column_name_project ;
var column_code_project ;
var column_chef_project;
var column_service ;
var column_other_services ;
var column_type_of_project ;
var column_perimeter ;
var column_date_project ;
var COLUMN_URL ;
/** will return the number of the column correspondant **/
function find_columns_in_projet(){
var tss = SpreadsheetApp.openById(SPREADSHEET_ID);
var sheet = tss.getSheets()[0];
var lastColumn = sheet.getLastColumn();
var data = sheet.getRange(1,1,1,lastColumn).getValues()[0];
for(var n=0;n<data.length;n++){
if(data[n].toString().indexOf('Name project') > -1)
column_name_project = n+1;
else if(data[n].toString().indexOf('Code') > -1)
column_code_project = n + 1;
else if(data[n].toString().indexOf('Chef') > -1)
column_chef_project= n + 1;
else if(data[n].toString().indexOf('Service') > -1)
column_service = n +1 ;
else if(data[n].toString().indexOf('Other services') > -1)
column_other_services = n + 1;
else if(data[n].toString().indexOf('Type of the project') > -1)
column_type_of_project = n + 1;
else if(data[n].toString().indexOf('Perimeter') > -1)
column_perimeter = n + 1;
else if(data[n].toString().indexOf('Date') > -1)
column_date_project = n + 1;
else if(data[n].toString().indexOf('URL') > -1)
COLUMN_URL = n +1 ;
}
}
/** pour visualiser le document sur la meme page **/
function view_doc_and_edit(event) {
find_columns_in_projet();
Logger.log("!! La colonne URL est: !!" + COLUMN_URL );
if( ( event.range.getSheet().getName() === "Sheet1" ) && ( event.range.getColumnIndex() == COLUMN_URL +1 ) ) {
if( event.value === "TRUE" ) {
try {
var URL = event.range.offset(0,-1,1,1).getValue();
Logger.log('The URL is : ' + URL );
var google_doc = DocumentApp.openByUrl(URL) ;
var body = google_doc.getBody();
Logger.log('The body is ' + body );
// Add this line
var ui = HtmlService.createTemplateFromFile('ModeLessDialog');
ui.body = URL; // Pass url to template
ui = ui.evaluate().setWidth(1000).setHeight(500);
SpreadsheetApp.getUi().showModalDialog(ui, TITLE);
var insertion_position = event.range.getRow() ;
var tss_bis = SpreadsheetApp.openById(SPREADSHEET_ID);
var sheet_bis = tss_bis.getSheets()[0];
var numRows_bis = sheet_bis.getLastRow();
var lastColumn_bis = sheet_bis.getLastColumn();
//from the second line car the first line we have the headers
var data_sheet = sheet_bis.getRange(1,1,numRows_bis,lastColumn_bis).getDisplayValues();
if(body)
{
var ok = 0; //pour l'instant il n'y a pas de tableau trouvé (avec 8 lignes) qui nous interesse pour mettre à jour dans la feuille de calcul
var numChildren=body.getNumChildren();
var compteur=0;
//tant qu'on n'a pas du tableau on va parcourir (car on n'est pas sur d'avoir le 4 comme enfant (Numero_Enfant_Tableau_Template) car l'utilisateur pourra modifier/insérer un prargraphe une image etc.
while(ok ==0 && compteur<numChildren)
{
var child=body.getChild(compteur);
/** ============On est concerné par le premier tableau seulement qui a au plus 8 lignes d'information ================**/
Logger.log('Le type dans la boucle ' + child.getType());
//on a trouvé un tableau qui nous interesse et qui a au plus 8 lignes d'information **/
if(child.getType()==DocumentApp.ElementType.TABLE && child.asTable().getNumRows() >= 8)
{
//on a trouve notre premier tableau la variable ok = 1
ok=1;
/** Le nombre de lignes dans le premier tableau avec au plus 8 lignes qui nous interessent **/
var numrows = child.asTable().getNumRows();
Logger.log('Le nombre de lignes dans notre Google Doc ' + numrows);
/** on va parcourir notre tableau pour récuperer les champs qui nous interessent **/
var k = 1; //on sait que c'est l'information à droite qui nous interessent on va éviter une boucle inutile
var celltxt,trange;
/** On va mettre la valeur du celltxt dans le spreadsheet et on va ajuster automatiquement la colonne avec la méthode autoResizeColumn **/
celltxt=child.asTable().getCell(0, k).editAsText().getText();
Logger.log('La valeur (à droite) dans le tableau ' + celltxt);
trange = sheet_bis.getRange(insertion_position, column_name_project); //l'emplacement correspondant
trange.setValue(celltxt);
celltxt=child.asTable().getCell(1, k).editAsText().getText();
Logger.log('La valeur (à droite) dans le tableau ' + celltxt);
trange = sheet_bis.getRange(insertion_position, column_code_project); //l'emplacement correspondant
trange.setValue(celltxt);
celltxt=child.asTable().getCell(2, k).editAsText().getText();
Logger.log('La valeur (à droite) dans le tableau ' + celltxt);
trange = sheet_bis.getRange(insertion_position, column_chef_project); //l'emplacement correspondant
trange.setValue(celltxt);
celltxt=child.asTable().getCell(3, k).editAsText().getText();
Logger.log('La valeur (à droite) dans le tableau ' + celltxt);
trange = sheet_bis.getRange(insertion_position, column_service); //l'emplacement correspondant
trange.setValue(celltxt);
celltxt=child.asTable().getCell(4, k).editAsText().getText();
Logger.log('La valeur (à droite) dans le tableau ' + celltxt);
trange = sheet_bis.getRange(insertion_position, column_other_services); //l'emplacement correspondant
trange.setValue(celltxt);
celltxt=child.asTable().getCell(5, k).editAsText().getText();
Logger.log('La valeur (à droite) dans le tableau ' + celltxt);
trange = sheet_bis.getRange(insertion_position, column_type_of_project); //l'emplacement correspondant
trange.setValue(celltxt);
celltxt=child.asTable().getCell(6, k).editAsText().getText();
Logger.log('La valeur (à droite) dans le tableau ' + celltxt);
trange = sheet_bis.getRange(insertion_position, column_perimeter); //l'emplacement correspondant
trange.setValue(celltxt);
celltxt=child.asTable().getCell(7, k).editAsText().getText();
Logger.log('La valeur (à droite) dans le tableau ' + celltxt);
trange = sheet_bis.getRange(insertion_position, column_date_project); //l'emplacement correspondant
trange.setValue(celltxt);
}
compteur++; /** on va incrementer le compteur jusqu'à on trouve le tableau qui nous interessent **/
}
}
event.range.setValue("FALSE");
}
catch(err) {
Logger.log(err);
}
}
}
google_doc.saveAndClose();
}
Using while loop, I want to alert names with their number from an array. I also have to put every name in a single alert.
Script:
var voetbalteam = 1;
var spelers = ["Nobert Alblas", "Kostas Lamprou", "André Onana", "Benjamin van Leer", "Léon Bergsma", "Damil Dankerlui", "Matthijs de Ligt", "Mitchell Dijks", "Luis Orejuela", "Daley Sinkgraven", "Joël Veltman", "Nick Viergever", "Max Wöber", "Deyovaisio Zeefuik", "Frenkie de Jong", "Siem de Jong", "Carel Eiting", "Noussair Mazaoui", "Lasse Schöne", "Donny van de Beek", "Klaas Jan Huntelaar", "Kasper Dolberg", "Justin Kluivert"];
while ((voetbalteam <= 23) + (spelers >= 0)){
alert("Ik ben " + spelers[spelers] + " En ik ben de " + voetbalteam + "e speler.");
spelers ++;
voetbalteam ++;
}
Use forEach() to loop over the array.
var voetbalteam = 1;
var spelers = ["Nobert Alblas", "Kostas Lamprou", "André Onana", "Benjamin van Leer", "Léon Bergsma", "Damil Dankerlui", "Matthijs de Ligt", "Mitchell Dijks", "Luis Orejuela", "Daley Sinkgraven", "Joël Veltman", "Nick Viergever", "Max Wöber", "Deyovaisio Zeefuik", "Frenkie de Jong", "Siem de Jong", "Carel Eiting", "Noussair Mazaoui", "Lasse Schöne", "Donny van de Beek", "Klaas Jan Huntelaar", "Kasper Dolberg", "Justin Kluivert"];
spelers.forEach(function(key, value){
console.log("Ik ben " + key + " En ik ben de " + (value + 1) + "e speler.");
});
Using a while loop, use voetbalteam as an iterator and increment it inside the while loop.
var voetbalteam = 0;
var spelers = ["Nobert Alblas", "Kostas Lamprou", "André Onana", "Benjamin van Leer", "Léon Bergsma", "Damil Dankerlui", "Matthijs de Ligt", "Mitchell Dijks", "Luis Orejuela", "Daley Sinkgraven", "Joël Veltman", "Nick Viergever", "Max Wöber", "Deyovaisio Zeefuik", "Frenkie de Jong", "Siem de Jong", "Carel Eiting", "Noussair Mazaoui", "Lasse Schöne", "Donny van de Beek", "Klaas Jan Huntelaar", "Kasper Dolberg", "Justin Kluivert"];
while (voetbalteam < spelers.length){
console.log("Ik ben " + spelers[voetbalteam] + " En ik ben de " + (voetbalteam + 1) + "e speler.");
voetbalteam ++;
}
consider using console.log() instead of alert() when you are coding.
alert() is blocking
alert() cannot be easily suppressed in non-debug environment
console typically formats your objects nicely and allows to traverse
them
logging statements often have an interactive pointer to code which
issued logging statement
you cannot look at more than one alert() message at a time
consoles can have different logging levels with intuitive formatting
The above text was taken from here
If you really want to use a while loop, try this:
var voetbalteam = 0;
var spelers = ["Nobert Alblas", "Kostas Lamprou", "André Onana", "Benjamin van Leer", "Léon Bergsma", "Damil Dankerlui", "Matthijs de Ligt", "Mitchell Dijks", "Luis Orejuela", "Daley Sinkgraven", "Joël Veltman", "Nick Viergever", "Max Wöber", "Deyovaisio Zeefuik", "Frenkie de Jong", "Siem de Jong", "Carel Eiting", "Noussair Mazaoui", "Lasse Schöne", "Donny van de Beek", "Klaas Jan Huntelaar", "Kasper Dolberg", "Justin Kluivert"];
while (voetbalteam < spelers.length){
alert("Ik ben " + spelers[voetbalteam] + " En ik ben de " + (voetbalteam + 1) + "e speler.");
voetbalteam++;
}
I've searching and trying other suggestions in StackOverflow.
Unfortunately the answers are not working for me. They are suggesting to use 'foreach' instead of 'for', but how could I... if I want to iterate just 50 times? :<
Well, I'll just paste the code and let's see if some good folk can help me.
JSLint was unable to finish.
Unexpected 'for'. for (var i=1;i<=50;i+=1){
line 6 column 8
Unexpected 'var'. for (var i=1;i<=50;i+=1){
line 6 column 13
"use strict";
var campo = [];
var ronda = 0;
// Llenamos el campo de 50 humanos/maquinas/extraterrestres = 150 jugadores
for (var i=1;i<=50;i+=1){
campo.push(new Human("h"+i));
campo.push(new Machine("m"+i));
campo.push(new Alien("e"+i));
}
// Array.prototype.suffle para barajar el Array
Array.prototype.shuffle = function() {
var input = this;
for (var i=input.length-1;i>=0;i-=1){
var randomIndex = Math.floor(Math.random()*(i+1));
var itemAtIndex = input[randomIndex];
input[randomIndex]=input[i];
input[i] = itemAtIndex;
}
};
// Barajamos el Array campo
campo.shuffle();
// Comprobamos que quedan más de 1 jugador por ronda
while (campo.length>1) {
console.log("Iniciando ronda: " + ++ronda);
console.log(campo.length + " jugadores luchando.");
// Recorremos el campo, y luchamos
var muertos = 0;
for (var i=0; i<campo.length-1; i+=2){
// Caso de numero impar de jugadores:
// Por ejemplo cuando solo quedan 3 jugadores. Pelean 1 vs 2. El 3 se libra.
// - Si siguen vivos y aguantan otra ronda, se barajan las posiciones otra vez y
// vuelven a pelear dos. Y el nuevo tercero no pelea.
// - Si uno de los dos muere, en la siguiente ronda ya solo quedan 2, y pelean normal.
campo[i].fight(campo[(i+1)]);
// # descomentar solo la siguiente linea para hacer comprobaciones #
// console.log("["+ campo[i].username + "] VS ["+ campo[(i+1)].username + "]");
if (campo[i].health<=0) {
console.log("El " + campo[i].constructor.name + " llamado " + campo[i].showName() + " ha sido asesinado :<");
var fallecido = campo.splice(i, 1);
// # descomentar solo la siguiente linea para hacer comprobaciones #
//console.log(fallecido[0]);
i--; // como el array se hace pequeño, hay que corregir el error para que no se salte jugadores
muertos++;
} else {
if (campo[(i+1)].health<=0) {
console.log("El " + campo[(i+1)].constructor.name + " llamado " + campo[(i+1)].showName() + " ha sido asesinado :<");
var fallecido = campo.splice((i+1), 1);
// # descomentar solo la siguiente linea para hacer comprobaciones #
// console.log(fallecido[0]);
i--; // como el array se hace pequeño, hay que corregir el error para que no se salte jugadores
muertos++;
}
else {
// # descomentar solo la siguiente linea para hacer comprobaciones #
// console.log("Siguen vivos");
}
}
}
console.log("Fin de ronda!")
if (muertos === 1) {
console.log("Ha muerto " + muertos + " jugador.");
} else {
console.log("Han muerto " + muertos + " jugadores.");
}
// Al final de la ronda barajamos de nuevo
campo.shuffle();
}
if (campo.length === 1) {
console.log("Vaya!! Ha sido una memorable batalla!");
console.log("Después de tantos bits derramados y de " + ronda + " rondas... el jugador '" + campo[0].constructor.name + "' llamado '" + campo[0].showName() + "' se ha alzado con la victoria!!");
}
There are some other for in the code, but It seems to stop at the first one.
Thank you in advance!
Forgot to say, the code works PERFECT. But I was just validating it with JSLint, also 'tolerating' for warnings in JSLint doesn't work.
When you choose to tolerate for, the next thing it's warning you about is the global declaration of the var i. Since you've got the for-loop at the top-level, i becomes available everywhere in your program.
I'd just tolerate for and wrap it up an in IIFE. That way, i is only available inside this function, and doesn't leak out to the global scope.
(function() {
var i = 0;
for (i=1;i<=50;i+=1) {
campo.push(new Human("h"+i));
campo.push(new Machine("m"+i));
campo.push(new Alien("e"+i));
}
})();
You could also, barring using an existing implementation out there, create a function that generalizes the "repeat n times" definition.
function repeat(fn, n) {
var i = 0;
for (;i < n; i += 1) {
fn();
}
}
Use in your case would look like:
function initialize() {
campo.push(new Human("h"+i));
campo.push(new Machine("m"+i));
campo.push(new Alien("e"+i));
}
// then later
repeat(initialize, 50);
jslint is being overzealous (some would say), it expects all var statements to be at the top of a function.
You can tell jslint that you don't care about that rule by adding an instruction comment on the line above where you are declaring the variable.
// Llenamos el campo de 50 humanos/maquinas/extraterrestres = 150 jugadores
/*jslint for:true */
for (var i=1;i<=50;i+=1){
Or you can move all your var i; to the top of the file/function