We Keep Coding

For loop wont run properly

I am trying to build a function that changes values in innerHTML of elements which have one class name, but different number values.
as in:
<div class="ingredient-assignment__quantity">5</div>
<div class="ingredient-assignment__quantity">300</div>
<div class="ingredient-assignment__quantity">250</div>
And I want a calculation (same for all) to run through all of them and then change the innerHTML of each to the result of each.
as in:
calcuation = 5 * innerHTML;
<div class="ingredient-assignment__quantity">25</div>
<div class="ingredient-assignment__quantity">1500</div>
<div class="ingredient-assignment__quantity">1250</div>
My JS function looks like this:
function ingredientChange (){
var portionsBefore = document.getElementById('portions');
var ingredients = document.getElementsByClassName('ingredient-assignment__quantity');
function getPortions(event) {
const getID = event.target.id;
if (getID == "minus") {
var y = Number(portionsBefore.innerHTML) - 1;
}
else {
var y = Number(portionsBefore.innerHTML) + 1;
}
changeIngredients(y);
portionsBefore.innerHTML = y;
}
function changeIngredients(y) {
var arr = Object.keys(ingredients).map((k) => ingredients[k])
for(var i = 0; i < arr.lenght; i++){
var changeValues = Number(arr[i].innerHTML) / Number(portionsBefore.innerHTML);
var changedValues = Number(changeValues) * y;
}
}
function addEventListeners () {
document.getElementById('minus').addEventListener('click', getPortions, false);
document.getElementById('plus').addEventListener('click', getPortions, false);
}
addEventListeners();
}
ingredientChange();
And everything except for the for loop works fine.
I cant find, whats wrong with the for loop

You have a typo in your for loop
arr.lenght should be arr.length.

Cocos2d-JS 3.0 migration

I'm moving from cocos2d-html5 version 2.2 to cocos2d-js 3.0 and I have a problem with this code (which works perfectly in version 2.2):
menuButtons = cc.Menu.create();
for (var a = 1; a < 6; a++){
var label = cc.LabelTTF.create("BUTTON " + a, "Arial", 20);
var tmpBtn = cc.MenuItemLabel.create(label, function (e) {
cc.log("TEST TAG: " + e.tag);
//StartSomethingOther(e);
}, this);
tmpBtn.setPosition(50, a * 30);
tmpBtn.tag = a;
menuButtons.addChild(tmpBtn,2,1);
}
menuButtons.setPosition(10, 10);
this.addChild(menuButtons, 1);
Any "button" is pressed the console always output "TEST TAG: 1" instead of putting the correct number.
Any tip to solve the problem?

Change the .tag with .title or even better a ['data-'] identifier like in this example:
menuButtons = cc.Menu.create();
for (var a = 1; a < 6; a++){
var label = cc.LabelTTF.create("BUTTON " + a, "Arial", 20);
var tmpBtn = cc.MenuItemLabel.create(label, function (e) {
cc.log("TEST TAG: " + e['data-tag']);
//StartSomethingOther(e);
}, this);
tmpBtn.setPosition(50, a * 30);
tmpBtn['data-tag'] = a;
menuButtons.addChild(tmpBtn,2,1);
}
menuButtons.setPosition(10, 10);
this.addChild(menuButtons, 1);

You're overwriting tag property here:
menuButtons.addChild(tmpBtn,2,1);
the third parameter sets tmpBtn.tag to 1.
If You want to continue to use tag property simply change:
tmpBtn.tag = a;
menuButtons.addChild(tmpBtn,2,1);
with:
menuButtons.addChild(tmpBtn,2,a);
If You don't want to use tag property, see Francesco's answer

clearInterval() not working

SYNTAX ERRORS FIXED. Dreamweaver says that I have an error in my code on line 52. I can't see what is wrong? Maybe this has something to do with the fact that my if and else statements are not working.
IF AND ELSE STATEMENTS FIXED. If I test the if and else statements individually they work correctly, but when I run the entire document, they do not run. Could someone tell me if the error and my if/else statements not working are related or if there is something else wrong.
<script>
var car1=new Object();
car1.Name="Rusty";
car1.Speed="1px", 40;
car1.Distance=0;
var car2=new Object();
car2.Name="Dusty";
car2.Speed="2px", 40;
car2.Distance=0;
var car3=new Object();
car3.Name="Crankshaft";
car3.Speed="4px", 40;
car3.Distance=0;
function runRusty(){
setInterval(function(){moveRusty()},40);
function moveRusty(){car1.Distance=car1.Distance +1
document.getElementById("rusty").style.marginLeft=car1.Distance + "px"
};
};
function runDusty(){
setInterval(function(){moveDusty()},40);
function moveDusty(){car2.Distance=car2.Distance +1
document.getElementById("dusty").style.marginLeft=car2.Distance + "px"
};
};
function runCrankshaft(){
setInterval(function(){moveCrank()},40);
function moveCrank(){car3.Distance=car3.Distance +1
document.getElementById("crankshaft").style.marginLeft=car3.Distance + "px"
};
};
function winLose () {if (document.getElementById("rusty").style.marginLeft="900px"){
alert("Winner is Rusty!");
clearInterval(runRusty);
}
else if(document.getElementById("dusty").style.marginLeft="900px"){
alert("Winner is Dusty!");
clearInterval(runDusty);
}
else if(document.getElementById("crankshaft").style.marginLeft="900px"){
alert("Winner is Crankshaft!");
clearInterval(runCrankshaft);
};
};
</script>
EDIT:
The if and else statements now work as I changed declared my functions globally and changed them slightly. The code now looks as such:
var car1=new Object();
car1.Name="Rusty";
car1.Speed=1;
car1.Distance=0;
var car2=new Object();
car2.Name="Dusty";
car2.Speed=2;
car2.Distance=0;
var car3=new Object();
car3.Name="Crankshaft";
car3.Speed=4;
car3.Distance=0;
var moveRusty;
var moveDusty;
var moveCrankShaft;
function runRusty(){
moveRusty=setInterval(function(){
car1.Distance=car1.Distance + car1.Speed;
document.getElementById("rusty").style.marginLeft=car1.Distance + "px";
winLose();
},40);
};
function runDusty(){
moveDusty=setInterval(function(){
car2.Distance=car2.Distance + car2.Speed;
document.getElementById("dusty").style.marginLeft=car2.Distance + "px";
winLose();
},40);
};
function runCrankshaft(){
moveCrankShaft=setInterval(function(){
car3.Distance=car3.Distance + car3.Speed;
document.getElementById("crankshaft").style.marginLeft=car3.Distance + "px";
winLose();
},40);
}
function winLose () {
if (car1.Distance >= 900){
alert("Winner is Rusty!");
car1.Distance = 0;
car1.Speed = 0;
car2.Distance = 0;
car2.Speed = 0;
car3.Distance = 0;
car3.Speed = 0;
}
else
if(car2.Distance >= 900){
alert("Winner is Dusty!");
car1.Distance = 0;
car1.Speed = 0;
car2.Distance = 0;
car2.Speed = 0;
car3.Distance = 0;
car3.Speed = 0;
}
else
if(car3.Distance >= 900){
alert("Winner is Crankshaft!");
car1.Distance = 0;
car1.Speed = 0;
car2.Distance = 0;
car2.Speed = 0;
car3.Distance = 0;
car3.Speed = 0;
}
};
clearInterval(moveRusty);
clearInterval(moveDusty);
clearInterval(moveCrankShaft);
Everything works now. All the alerts happen and the position of the cars is reset. But all my clearInterval() do not work. I don't know if clearInterval() is the correct thing to use. What I want to do is reset the page so that I can run the "game" again. Right now, the only way to do that is by refreshing the page. I've double checked how I've declared my setInterval() and how I'm calling them in my clearInterval(), and as far as I can it's right?

You are using clearInterval() wrong. You are passing it a function parameter whereas it expects an object.
// correct usage
var time = setInterval(stuff, 100);
clearInterval(time);

You have a semi colon before the else. ; which is a syntax error, remove it . You have a lot of them in weird places also, I suggest you don't put them after function declarations, if blocks if/else blocks, loop blocks etc.

When you want to test if to things are 'equal' in a if statement, you need to use == or === and NOT =
if (document.getElementById("crankshaft").style.marginLeft = "900px") // WRONG
if (document.getElementById("crankshaft").style.marginLeft == "900px") // RIGHT
if (document.getElementById("crankshaft").style.marginLeft === "900px") // BETTER
Read the answer to the following question to know the difference between == and ===
Difference between == and === in JavaScript
Hope this helps

javascript array cycling only first var

I am using javascript to cycle through an array of urls within an iframe and so far when the prev or next buttons are pressed it jumps to the first var in the array and both prev and next functions end. Any ideas?
<iframe id="myFrame" src="http://startpage.com" width="484px" height = "424px"></iframe>
<button onclick = "prevPage(); ">Prev</button>
<button onclick = "nextPage(); ">Next</button>
<script>
var sites=new Array();
sites[0]="http://site1.html";
sites[1]="http://site2.html";
sites[2]="http://site3.html";
sites[3]="http://site4.html";
function nextPage() {
var number = document.getElementById("myFrame").src;
number = number.substring(number.length - 4 ,number.length-3);
number = parseInt(number) + 1;
document.getElementById("myFrame").src=sites[0];
}
function prevPage() {
var number = document.getElementById("myFrame").src;
number = number.substring(number.length - 3 ,number.length-4);
number = parseInt(number) - 1;
document.getElementById("myFrame").src=sites[0];
}
</script>

Why are you using the URL as your 'position' storage? It'd be FAR easier to just use a variable:
var curPos = 0;
function nextPage() {
curPos++;
if (curPos >= sites.length) {
curPos = 0;
}
document.getElementById('myframe').src = sites[curPos];
}
function prevPage() {
curPos--;
if (curPos < 0) {
curPos = sites.length - 1;
}
document.getElementById('myframe'.).src = sites[curPos];
}

If I understood your problem correctly I think all you need to do is use document.getElementById("myFrame").src=sites[number]; instead of document.getElementById("myFrame").src=sites[0];

May be
document.getElementById("myFrame").src=sites[number-1];
is what you are trying to do in both functions.

Element inserted with jQuery doesn't appear right away

I am trying to add a loading message while some stuff is loading, but it doesn't appear until after the stuff loads. Here is my code:
$('#loading').text('Loading...').show();
//alert('test');
for ( var i in ['list','of','things'] )
{
// dummy loop to waste some time
for ( var j=0; j<5000000; j++ ) {
var asd = j+123*j%17;
var qwe = j+123*asd%17 + j;
var zxc = j+123*asd%17 + j*zxc;
}
}
$('#loading').hide();
$('#content1').html('<ul><li>Test</li><li>Test</li></ul>');
When running this, the page appears blank while the for loop is running and the loading banner doesn't appear. When loading is done it simply appears and instantly starts fading out. (I added a big for loop inside the above loop to simulate a slower load and it still doesn't show the loading message until the loop is done.)
The loading takes less than a second (on Chrome, anyway) so it's not a huge problem, but why does this happen, and can I get the message to appear before the delay?
EDIT: updated code an put version on jsFiddle: http://jsfiddle.net/an2Pc/3/

If it is a static message, you don't need to create on the fly. Simply put it in and hide it using display: none; in css. Then, you can show it using $('#loading').show() or even $('#loading').fadeIn(). I don't know what do you do in the loop, but there should not be a reason for not showing inmediately.
Edited: I could verify you are right, it doesn't show, not sure why. Anyway, you can fix it by inserting the code as a callback of the show() method, it works:
$('#loading').text('Loading...').show(function() {
for ( var i in ['list','of','things'] )
{
for ( var j=0; j<5000000; j++ ) {
var asd = j+123*j%17;
var qwe = j+123*asd%17 + j;
var zxc = j+123*asd%17 + j*zxc;
}
}
$('#loading').hide();
$('#content1').html('<ul><li>Test</li><li>Test</li></ul>');
});
Edited for new case: for adding a callback to a method that doesn't include one, you can use the trick of animate some property that doesn't change anything, like this (I don't know if it's a best practice, but it works :)
<div class="notice" id="loading">Testing</div>
<div class="content" id="content1">a</div>
$('#loading').text('Loading...').animate({ opacity: 1 }, function() {
for ( var i in ['list','of','things'] )
{
for ( var j=0; j<5000000; j++ ) {
var asd = j+123*j%17;
var qwe = j+123*asd%17 + j;
var zxc = j+123*asd%17 + j*zxc;
}
}
$('#loading').hide();
$('#content1').html('<ul><li>Test</li><li>Test</li></ul>');
});

Hi~ Please use it in your page:
<div class="notice" id="loading" style="display:none">Loading...</div>
<input type="button" onclick="Load()" />
following code in head block:
<script type="text/javascript">
function Load() {
$("#loading").css("display", "block").fadeIn('slow');
for ( i=0; i<1000;i++) {
// load some stuff here
}
$("#loading").fadeOut('slow');
}
</script>
Don't forget to include the JQUERY file:
<script type="text/javascript" src="../Scripts/jquery-1.5.1.min.js"></script>

I'm not sure why this happens, but a solution is to the put the loop inside a setTimeout to delay it a bit.
$('#loading').text('Loading...').show();
setTimeout(function() {
for (var i in ['list', 'of', 'things']) {
for (var j = 0; j < 5000000; j++) {
var asd = j + 123 * j % 17;
var qwe = j + 123 * asd % 17 + j;
var zxc = j + 123 * asd % 17 + j * zxc;
}
}
$('#loading').hide();
$('#content1').html('<ul><li>Test</li><li>Test</li></ul>');
}, 1);
jsFiddle: http://jsfiddle.net/an2Pc/4/