Develop Reference

String + an incremental value in JavaScript

I've added comments at the middle of the code. Please help me If you can, I have to deliver the product today.
if (a === 3) { //this would be how many of the answers further the action
var starting = 2; // for an example: yes or no; two of the answers go to no, one goes to yes.
// we take 2 as a starting point /you can set these individually for each scenario;
if (starting === 2) {
for (i = 0; i < starting; i++) {
answers[i] = 1; //sets the two checking points of the answer to the no, remaining yes;
document.getElementById("btn" + i).style.backgroundColor = "red";
// the problem lies here
// I tried multiple ways but none of them worked so far
//i want to apply the style change to multiple buttons at once.
}
alert(answers);
for (i = 0; i < starting; i++) {
if (answers[i] == 1) {
}
}
}
}
The problem is that the name of the button which is btn and the buttons are named as btn1, btn2,btn3; I want the for loop to change it to all of the buttons, however the string literal at the id doesn't recognize the i;
Example: "btn" + i; = change the style of the btn1
I fixed it guys. The mistake was that the for loop starts at 1;
And I have named the id of the buttons wrong. Novice mistake! :)

for (i = 0; i < 3; i++) {
if (document.getElementById("btn" + i) != undefined)
document.getElementById("btn" + i).style.backgroundColor = "red";
}
<input type="button" value="Submit" id="btn3">
<input type="button" value="Submit" id="btn1">
<input type="button" value="Submit" id="btn2">
The problem is your button id starts from btn1 and your code starts from 0 which is not located in your html so either add a check before setting background color or start your loop from 1
if (document.getElementById("btn" + i) != undefined)

A loop within a loop - Javascript

I have a problem with a loop inside a loop.
By selecting the number and clicking the "Generate boxes" button it generates boxes with numbers from 1 to 49.
If you click the first time everything works fine.
But if you add more boxes it once again adds those 49 numbers to the already existing boxes. That's the problem. I only want to generate new boxes with numbers from 1 to 49.
This is the code:
function kasterl() {
$(".plunder").click(function() {
var wert = $( "#wieviel option:selected").text();
MyInt = parseInt(wert);
createKaesten(MyInt);
});
}
function createKaesten(zahl) {
var gesamt = $(".kasten").length+1;
var numberOf = $(".kasten").length;
for(var i=1; i<=zahl; i++) {
$(".rahmen").append("<div class='kasten nr"+ gesamt +"'><ul></ul></div>");
}
for(var n=1; n<=49; n++) {
$(".kasten ul").append("<li class='nummer'>" + n + "</li>");
}
}
And here you can test it: link for testing

As you have found, $(".kasten ul").append(...) will append to all elements that matched the ".kasten ul" selector.
You said you had a problem with a "loop within a loop", but your current code doesn't in fact nest the loops. Following is a solution that actually does nest the loops:
function createKaesten(zahl) {
var gesamt = $(".kasten").length + 1;
var numberOf = $(".kasten").length;
var newUL;
for (var i = 1; i <= zahl; i++) {
newUL = $("<ul></ul>");
for (var n = 1; n <= 5; n++) {
newUL.append("<li class='nummer'>" + n + "</li>");
}
$("<div class='kasten nr" + gesamt + "'></div>").append(newUL).appendTo(".rahmen");
}
}
$("button").click(function() {
createKaesten(3);
});
li { display: inline-block; padding: 0 10px; }
.kasten { border: thin black solid; margin: 2px; padding: 0px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Test</button>
<div class="rahmen"></div>
The outer loop creates a new, empty UL, then the inner loop appends the new LI items to that UL, then we create a DIV, append the new UL to it, then append the DIV to the .rahmen" container.
(Note that for demo purposes each click of the button only adds 3 x 5 items, rather than something x 49 items, and I've styled the LIs to go across the page horizontally so that it's easier to see what's happening. Click "Run code snippet" to try it out.)

Note in the code that you use the function $().append()
Appending does just that - it appends new content to the end of existing content. Append will be executed every time you click generate.
Edit: I added a codepen to illustrate this. Hit each button multiple times to see the difference.

Change color for every second ul li with a "for loop"

I am learning javascript in codecademy and so far I understand how alot of things work. Sadly they dont explain how to target an elements color or how to target elements / selectors / divs.
I am testing out my knowledge. What I am trying is to give every second list item the color red by using the for loop.
How do I do this?
var listColor = function(){
var color = style.("red");
var list = getElementsByTagName("li");
for (i = 0; i < list.length; i + 2;) {
list === color
}
];
listColor();
and here my http://jsfiddle.net/Lr8nZ/15/
UPDATED JSfiddle but still not working http://jsfiddle.net/Lr8nZ/23/
so basically:
Red,
Black,
Red,
Black

Something do like this.
var listColor = function(){
var list = document.getElementsByTagName("li");
for (i = 0; i < list.length; i++) {
if(i%2==0)
list[i].style="color:red";
else
list[i].style="color:blue";
}
}
listColor();

You have a few syntax errors, but you can do this:
var listColor = function() {
var list = document.getElementsByTagName('li');
for (var i = 0, l = list.length; i < l; i++) {
if (i % 2 === 0) {
list[i].style.color = 'red';
}
}
};
// Or...
var listColor = function() {
var list = document.getElementsByTagName('li');
for (var i = 0, l = list.length; i < l; i += 2) {
list[i + 1].style.color = 'red';
}
};
listColor();
When you increment i make sure you're updating its value with i++ or i += 1, or you'll create an endless loop.
i % 2 uses the % modulus operator. It's the remainder you would get from dividing the two numbers. Even numbers divide evenly by 2, so the remainder will be 0, which we check for.
The property you were looking for is called style. It has a property called color which we set to the string 'red' in this case.

try this
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
index=1;
$("#temp li").each(function(){
if(index%2==0)
{
$(this).css("color","red")
}
index++;
});
})
</script>
<style>
</style>
</head>
<body>
<ul id='temp'>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</body>
</html>

Try using a console to see the errors in your code. It's a tool that's indispensible for any js coder. Here's the updated fiddle http://jsfiddle.net/Lr8nZ/24/
The first thing which you notice is style.color('red'). For this line to be even valid js, there has to be a style object defined. Otherwise it will search for it on window which always leads to confusion.
Another thing is note how we have to actually assign the new value to i in for loop' third condition. Just mentioning i+2 will not work because i will stay the same resulting in an infinite loop.
Again, fire up web console. Generally, you do that by right clicking on page > Inspect > Web console.

Generating random divs multiple times on load

let me just give a quick story. I have made a page. (VERY simple - two divs with a different background image, see here.)
Anyway, I need to make it so that when a new page loads, the two divs that I have load in a random order over and over, filling the entire screen content. So there's no pattern of the first div and then the second, it's just randomly generated. Sort of like a huge grid, with the two divs repeated with no pattern.
My question is...is that possible? I assume I'd need to know PHP, but I have no knowledge of it.
Thanks guys, I appreciate all help!

http://jsfiddle.net/uYPRq/
jquery
var div1 = '<div class="one">';
var div2 = '<div class="two">';
var len =
Math.floor(window.innerWidth/30)*Math.floor(window.innerHeight/30);
for (x = 0; x < len; x++) {
if ( Math.random() > 0.5 ) {
$(div1).appendTo('body');
}
else {
$(div2).appendTo('body');
}
}
css
div.one, div.two {
height:30px;
width:30px;
float:left;
}
div.one { background-color:#EBE1E4; }
div.two { background-color:#F0F5DF; }
edit:
changed screen.availWidth to window.innerWidth

Something like so? Just loop through how ever many times you like and add elements in.
for (i = 0; i < 300; i++) {
var type1 = document.createElement("div");
var type2 = document.createElement("div");
type1.innerHTML = "div1";
type2.innerHTML = "div2";
type1.setAttribute("class", "type1");
type2.setAttribute("class", "type2");
document.body.appendChild(type1);
document.body.appendChild(type2);
}

No PHP needed. This can be done client-side using Javascript (Jquery might be easier).

$(d).attr("id") is undefined javascript

I have a variable d that I use like this:
$(function() {
for(i = 1; i <= 31; i++) {
var d = '#days' + i;
if ($(d).attr("id").substr(4,2) == 11) {
$(d).addClass("date_has_event");
//console.log("diez");
} else {
console.log("otro");
}
}
}
However I get the following error in firebug:
$(d).attr("id") is undefined
index.html (L23) (?)()()
jquery.min.js (L27) onreadystatechange()()
jquery.min.js (L27) onreadystatechange()()
jquery.min.js (L21) nodeName()([function(), function()], function(), undefined)
onreadystatechange()()
I really don't understand why. Does anyone know?
Edit
I'm sorry for the poor explanation I had to run, here's what's going on a little bit more detailed. I am generating a calendar using javascript. each td has a different id (hence the #days + i) and I am running it from 1 to 31 so I can cover the longer months. However I am getting the error I mentioned above. I am also using the jQuery library to enable me to select more easily (i.e. instead of getElementById just #days)

Why not just check if i == 11, then do your processing on it? It would still only fire on $('#days11'). Edit: If you need to make sure the element exists as well, just slap that into the conditional.
$(function(){
for(i = 1; i <= 31; i++){
var d = '#days' + i;
// if($(d) && i == 11){
if(i == 11){
$(d).addClass("date_has_event");
//console.log("diez");
}else{
console.log("otro");
}
}
}

Ok, new answer. the way you are doing this is not very "jqueryish". lets step back a bit. from what I can tell you have an html structure something like:
<div id="days1"></div>
<div id="days2"></div>
...
You are then running this against every item with a days(num) id? A better solution is this, if you want to add a class to every element with a date in it, first apply a class:
<div class="days"></div>
<div class="days"></div>
Your code can then be
$(function(){
$(".days").each(function(i){
if($(this).substr(4,2) == 11){
$(this).addClass("date_has_event");
}
});
});

Since you are selecting by id, this is redundant:
if ($(d).attr("id").substr(4,2) == 11)
because the ID attribute of d is d.
Is most simple to do:
if (i == 11)

Missing the closing bracket?
$(function() {
for(i = 1; i <= 31; i++) {
var d = '#days' + i;
if (i == 11) {
$(d).addClass("date_has_event");
//console.log("diez");
} else {
console.log("otro");
}
}
// shouldn't the next line be });
}