Alert an array with while loop - javascript

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++;
}

Related

I can't get the slider to work, it doesn't respond to other checkbox filters

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);

RegEx - Find all sets of string enclosed by quotes

I have documents in which i need to highlight that a person was quoted. So I'm looking for all text that's enclosed by quotes...I'm using the below code, which works but it only captures the first occurence..
var str = 'L\'armée sud-coréenne accuse la Corée du Nord d\'avoir lancé \"plusieurs\" missiles \"balistiques interdits qui ont franchi une distance\" d\'environ 1000 kilomètres avant de tomber au \"large de la côte est du pays communiste.\" '
var reg = new RegExp(/"(.*?)"/);
var matches = str.match(reg);
for (var i = 0; i < matches.length; i++) {
var s = matches[i];
str = str.replace(matches[i], '<span style="color:blue">' + matches[i] + '</span>');
matches[i] = s;
}
Make your Regex global:
The g modifier is used to perform a global match (find all matches rather than stopping after the first match).
var str = 'L\'armée sud-coréenne accuse la Corée du Nord d\'avoir lancé \"plusieurs\" missiles \"balistiques interdits qui ont franchi une distance\" d\'environ 1000 kilomètres avant de tomber au \"large de la côte est du pays communiste.\" '
var reg = new RegExp(/"(.*?)"/g); //notice /g, making the expression global
var matches = str.match(reg);
for (var i = 0; i < matches.length; i++) {
var s = matches[i];
str = str.replace(matches[i], '<span style="color:blue">' + matches[i] + '</span>');
matches[i] = s;
}
document.getElementById("myDiv").innerHTML = str;
Making your expression global guarantees all instances of the quotes match.
JSFiddle: https://jsfiddle.net/zjxjub96/
To illustrate what #Casimir says in his comment, here is a little example:
var str = 'L\'armée sud-coréenne accuse la Corée du Nord d\'avoir lancé \"plusieurs\" missiles \"balistiques interdits qui ont franchi une distance\" d\'environ 1000 kilomètres avant de tomber au \"large de la côte est du pays communiste.\" '
str = str.replace(/"(.*?)"/g, '<span style="color:blue">$&</span>')
document.getElementById("myDiv").innerHTML = str;
<div id="myDiv">
</div>
Notice that this way is easier, and doesn't require a for loop.
JSFiddle: https://jsfiddle.net/zjxjub96/1/

How to keep html sliders consistent, in sync?

I have a problem with keeping sliders in sync.
Sliders preview
If I +1 on one of the four sliders, then the others must be substracted with 1/3.
What is the best way to perform this action?
I tried through Javascript already but can't come up with a working code. The selected slider does change value, but the 3 others give weird numbers.
The oninput() method is called when changing one of the sliders. When selecting a sliders and pressing the arrows keys to change the value then nothing happens. When drag and dropping a new value on the slider, also nothing happens. Only when sliding very rapidly.
When clicking on a new value on the slider, it does work somehow..
What am I doing wrong here?
this is the whole function, some variables are written in Dutch...
Code preview:
function showValueSub(sliderValue, parent, aantalKinderen, totaalbedragCategorie, echteParentId, teller, aantalSiblings, opgeroepenDoorHoofdCategorie) {
/*
het labeltje onder de afbeelding van de hoofdcategorie moet niet meer worden aangepast.
document.getElementById("subcat" + range).innerHTML = newValue + " Euro";
##
Parameters:
parent=het begrotingsId van het huidig element.
echteParentId= het begrotingsId van de parent
##
*/
//alert('test');
//###################################################################################################################################################
//#LOOPEN OVER DE SIBLINGS
//enkel loopen over siblings als deze functie wordt uitgevoerd door huidig element, en niet de parent.
//eerst het outputelement onder de slider aanpassen
var siblingElement = document.getElementById(echteParentId + "input" + teller);
if (siblingElement != null) var siblingSlider = parseInt(siblingElement.getAttribute("onchangeviaparent"));
if (siblingElement != null && siblingSlider != 1) {
//als het niet is opgeroepen door een hoofdcategorie: dan output en input aanpasen van huidig element
var huidigOutputElement = document.getElementById(echteParentId + "output" + teller);
huidigOutputElement.innerText = sliderValue;
var aantalAanpasbareSiblings = 0;
var teVerdelenBedragSiblings = 0;
for (var i = 0; i < aantalSiblings - 1; i++) {
var siblingElement = document.getElementById(echteParentId + "." + i);
//tellen hoeveel kindelementen er zijn die aanpasbaar zijn.
if (siblingElement.getAttribute("categoriestatus") != "NIET_AANPASBAAR")
aantalAanpasbareSiblings++;
}
if (aantalAanpasbareSiblings == 0) aantalAanpasbareSiblings = 1;
if (vorigeSliderValueSibling != null)
teVerdelenBedragSiblings = (sliderValue - vorigeSliderValueSibling) / aantalAanpasbareSiblings; //te verdelen bedrag per aanpasbaar siblingElement
else
teVerdelenBedragSiblings = Math.round(sliderValue / aantalAanpasbareSiblings).toFixed(2); //te verdelen bedrag per aanpasbaar siblingElement
for (var i = 0; i < aantalSiblings; i++) {
//het huidig subelement mag niet aangepast worden, checken met een if.
var siblingElement = document.getElementById(echteParentId + "." + i);
if (siblingElement != document.getElementById(echteParentId + "." + teller)) {
if (siblingElement.getAttribute("categoriestatus") != "NIET_AANPASBAAR") {
//in het p element staat een bedrag + de string "EURO".
//eigen p element ophalen
var siblingElementMetBedrag = document.getElementById(echteParentId + "." + i + "p");
var bedrag = parseFloat(siblingElementMetBedrag.innerHTML.substring(0, siblingElementMetBedrag.innerHTML.length - 5).trim());
bedrag -= teVerdelenBedragSiblings; //aftrekken ipv optellen
siblingElementMetBedrag.innerHTML = Math.round(bedrag).toFixed(2) + " Euro";
//siblinginput(slider) element ophalen en proberen aan te passen
var siblingSliderElement = document.getElementById(echteParentId + "input" + i);
if (siblingSliderElement != null) siblingSliderElement.value = Math.round(siblingSliderElement.value - teVerdelenBedragSiblings).toFixed(2);
//output van sibling aanpassen
var siblingSliderOutput =document.getElementById(echteParentId + "output" + i);
if (siblingSliderOutput != null)
siblingSliderOutput.value = Math.round(siblingSliderOutput.value - teVerdelenBedragSiblings).toFixed(2);
}
}
}
}
vorigeSliderValueSibling = sliderValue;
//###################################################################################################################################################
//#LOPEN OVER DE KINDEREN.
var aantalAanpasbareKinderen = 0;
for (var i = 0; i < aantalKinderen; i++) {
var kindElement = document.getElementById(parent + "." + i);
//tellen hoeveel kindelementen er zijn die aanpasbaar zijn.
if (kindElement.getAttribute("categoriestatus") != "NIET_AANPASBAAR")
aantalAanpasbareKinderen++;
}
//als er geen aanpasbarekinderen gevonden zijn, deze standaard op 1 zetten want
//delen door 0 gaat niet.
if (aantalAanpasbareKinderen == 0) aantalAanpasbareKinderen = 1;
//checken of de slider al een keer is aangepast, zo ja huidig bedrag van de slider verminderen met vorige waarde van de slider
if (vorigeSliderValueSub != null)
teVerdelenBedrag = (sliderValue - vorigeSliderValueSub) / aantalAanpasbareKinderen; //te verdelen bedrag per aanpasbaar kindElement
else
teVerdelenBedrag = Math.round(sliderValue / aantalAanpasbareKinderen).toFixed(2); //te verdelen bedrag per aanpasbaar kindElement
for (var i = 0; i < aantalKinderen; i++) {
var kindElement = document.getElementById(parent + "." + i);
if (kindElement.getAttribute("categoriestatus") != "NIET_AANPASBAAR") {
//in het p element staat een bedrag + de string "EURO".
//eigen p element ophalen
var kindElementMetBedrag = document.getElementById(parent + "." + i + "p");
var bedrag = parseFloat(kindElementMetBedrag.innerHTML.substring(0, kindElementMetBedrag.innerHTML.length - 5).trim());
bedrag += teVerdelenBedrag;
kindElementMetBedrag.innerHTML = bedrag + " Euro";
//kindinput element ophalen en proberen aan te passen
var kindSliderElement = document.getElementById(parent + "input" + i);
if (kindSliderElement != null) kindSliderElement.value = sliderValue / aantalAanpasbareKinderen;
}
}
//###################################################################################################################################################
vorigeSliderValueSub = sliderValue;
//alert(siblingSlider.innerHTML);
if (siblingSlider != null) {
$("#" + echteParentId + "input" + teller).attr('onchangeviaparent', '0');
//siblingSlider.onchangeviaparent = '0';
//alert(parseInt(siblingSlider.getAttribute("onchangeviaparent")));
}
//document.getElementById(echteParentId + "." + teller).setAttribute("onchangeViaParent", "0");
//alert(document.getElementById(echteParentId + "input" + teller).getAttribute("onchangeViaParent"));
}

Get inner value of a xml node inside a javascript loop

I've a xml file with 10 "item entries" in the following format:
<channel>
<title>Search products</title>
<link>http://v2-bienaldolivrosp.rxnova.com/feeds/search/Products/?startRecord=1</link>
<description>Bienal do Livro de Sao Paulo search</description>
<language>pt-BR</language>
<item>
<guid isPermaLink="true">http://www.bienaldolivrosp.com.br/pt-BR/Exhibitors/376354/Manole-Conteudo/Products/716223/Gestao-de-Pessoas-4-ed-O-Novo-Papel-dos-Recursos-Humanos-nas-Organizacoes</guid>
<link>http://www.bienaldolivrosp.com.br/pt-BR/Exhibitors/376354/Manole-Conteudo/Products/716223/Gestao-de-Pessoas-4-ed-O-Novo-Papel-dos-Recursos-Humanos-nas-Organizacoes</link>
<title>Gestão de Pessoas 4ª ed. - O Novo Papel dos Recursos Humanos nas Organizações</title>
<description>A obra parte dos novos desafios da gestão de pessoas e direciona a atenção do leitor para seis ações que, inerentemente, se conectam em rede: agregar, recompensar, desenvolver, monitorar, manter e, por fim, aplicar pessoas. </description>
<pubDate>Fri, 25 Jul 2014 20:17:53 Z</pubDate>
<enclosure url="http://www.bienaldolivrosp.com.br/__novaimages/596889" type="image/jpg" length="1000" />
</item>
</channel>
I'm running the following code to parse the xml:
for (i = 0; i < values.length; i++) {
text += values[i]['title'] + " - " + "<br>";
}
The above code works fine but the problem is that I need to get the url inside de "enclosure url" node and I can't figure out how to do it.
Any help?
Try this one:
text +=
values[i]['title'] + " - " +
values[i]['enclosure'].getAttribute('url') +
" - " +
"<br>"
;
I may be wrong but... ^_^
I expect it will give output like:
"Gestão de Pessoas 4ª ed. - O Novo Papel dos Recursos Humanos nas Organizações - http://www.bienaldolivrosp.com.br/__novaimages/596889 - <br>"
Version 0.2:
text += values[i]['title'] + " - ";
if ( typeof values[i]['enclosure'] === 'undefined' ) {
text += 'Undefined Enclosure';
} else {
console.log( values[i]['enclosure'] );
text += values[i]['enclosure'].getAttribute('url');
}

JSLint: Unexpected 'for'. Unexpected 'var'

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

Categories

Resources