Escape "" characters to enter variable in jQuery - javascript

I am sure this one is staring me in the face. Trying to increase the rotation on an object until i reaches a value. Getting an error as I am trying to escape the CSS part to enter my variable 'i'.
Can anybody see what may be wrong?
for(var i = 0; i < 200; i++){
console.log(i);
$('.rotateMe').css({"transform": "rotate("i"deg)"});
}
Thanks

You have to concatenate variable inside string with + , like this:
for(var i = 0; i < 200; i++){
console.log(i);
$('.rotateMe').css({"transform": "rotate("+i+"deg)"});
}
for (var i = 0; i < 200; i++) {
$('.rotateMe').css({
"transform": "rotate(" + i + "deg)"
});
}
.rotateMe {
width: 50px;
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rotateMe"></div>

You forgot the +
for(var i = 0; i < 200; i++){
console.log(i);
$('.rotateMe').css({"transform": "rotate("+i+"deg)"});
}

You cannot concatenate strings like that in JS, try
"rotate("+i+"deg)"

You have an error in your code:
for(var i = 0; i < 200; i++){
console.log(i);
$('.rotateMe').css({"transform": "rotate(" + i + "deg)"});
}
For string concatenation in javascript you must use the plus (+).

Related

How to set [i] in array?

I don't know to set [i] in the array.
statusResponse() {
var dataStatus = this.$.xhrStatus.lastResponse;
for(var i = 0; i < this.maxStatus; i++) {
console.log(this.maxStatus);
console.log([i]);
console.log(dataStatus);
console.log(dataStatus[fs_+ i +_P41001_W41001B]);
this.userInfo.status({
"branch_plant": this.$.xhrStatus.lastResponse.fs_ +
[i] +_P41001_W41001B.data.gridData.rowset[0].sDescription_99.value
});
}
}
You could change:
dataStatus[fs_+ i +_P41001_W41001B]
to
dataStatus["fs_" + i + "_P41001_W41001B"]
Explaination
This is roughly how the computer understands it the following line:
Take string "fs_"
Add the variable i to it, so the string become "fs_4" (if i = 4)
Add "_P41001_W41001B" to it, so the string becomes "fs_4_P41001_W41001B"
Get dataStatus["fs_4_P41001_W41001B"]
Updated code:
statusResponse() {
var dataStatus = this.$.xhrStatus.lastResponse;
for(var i = 0; i < this.maxStatus; i++) {
console.log(this.maxStatus);
console.log([i]);
console.log(dataStatus);
console.log(dataStatus["fs_" + i + "_P41001_W41001B"]);
this.userInfo.status({
"branch_plant": this.$.xhrStatus.lastResponse["fs_" + i + "_P41001_W41001B"].data.gridData.rowset[0].sDescription_99.value
});
}
}

How do I display an array inside a string in javascript?

This is the code :
list = ["Alex","John","Kit","Lenny"];
for(var i = 0; i < 4; i++) {
$("body").append("<p> list[i] </p>');
};
Look at the for loop(yes this is using jquery),i want to add the list items inside the paragraph headers.How do i do it ?
list[i] is not a string, it's a variable. To include it into the appended element, close the quotation marks in following way:
var list = ["Alex","John","Kit","Lenny"];
for(var i = 0; i < 4; i++) {
$("body").append("<p>" + list[i] + "</p>")
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to append divs into another div inside a variable?

So, I am trying to create a HTML code generator just for fun. My actual problem is: How can I append divs from a loop inside another div that does not exist and is saved in a variable?
I hope I have been clear, thank you.
My little JavaScript until now:
colCont = $("<div class=\"stab-cont\"><div class=\"stab-row\"></div></div>");
function repeat(n) {
for (var i = 1; i < n + 1; i++) {
//Here I need to insert the n DIVs generated by this loop
}
}
repeat(3);
console.log(colCont);
JSFiddle: http://jsfiddle.net/qo3vdwhv/
Maybe I am under thinking it here, but this should work.
My code:
colCont = $("<div class=\"stab-cont\"></div>");
function repeat(n) {
for (var i = 1; i < n + 1; i++) {
$("<div class=\"stab-row\"></div>").appendTo(colCont); //build your div like you did with "colCont" and append the new div to colCont
}
}
repeat(3);
colCont.appendTo($("body"))
.stab-cont div {
border: 1px solid #c00;
margin: 10px;
float: left;
width: 200px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here's something to consider; instead of making your repeat() function dependent on colCont, make it a jQuery function instead.
In this case I've created a function that will repeat the contents of a jQuery object N times (N >= 1).
colCont = $("<div class=\"stab-cont\"></div>");
jQuery.fn.times = function(n) {
var len = this.length;
for (var i = 1; i < n; ++i) {
for (var k = 0; k < len; ++k) {
this.push(this[0].cloneNode(true));
}
}
return this;
};
colCont
.append($('<div class="stab-row"></div>').times(3))
.appendTo('body');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Adding elements on loop jQuery

I am trying to generate a row of 16 boxes on load of webpage.
Here is my code:
var box = $("<div></div>").addClass("box");
$(document).ready(function(){
for(var i = 0; i < 16; i++) {
$("#container").append(box);
}
});
I also tried this within the for loop's code block:
if($("#container:contains(box)")) {
$(box).append(box);
}
I kind of understand why this does not work. That var box is only referencing an element and is not a copy of an element?
As you can likely tell, I'm new. I would really appreciate some pointers on how I can achieve this. Thanks.
Why not just use like this?
for(var i = 0; i < 16; i++) {
$("#container").append('<div class="box box-'+i+'" />');
}
You're appending the same div over and over. That will just move it (in this case, right back where it was). For a new div each time:
$(document).ready(function(){
var ctr = $('#container');
for(var i = 0; i < 16; i++) {
ctr.append("<div class='box'></div>");
}
});
$(document).ready(function() {
var ctr = $('#container');
for (var i = 0; i < 16; i++) {
ctr.append("<div class='box'></div>");
}
});
.box {
margin: 10px;
height: 25px;
width: 25px;
background-color: red;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container"></div>
I recommend against using append in a loop, bad performance. I suggest this:
var buffer = [];
for(var i = 0; i < 16; i++) {
buffer.push("<div class='box'></div>");
}
var html=buffer.join('');
$('#container').append(html);

Number Keep Changing

I want to change the number by chooesing 6 numbers from 49 numbers, so first I declared a div and have six span in it to contain a number.
And I want to change it by getElementByTagName to assign a new number combined with setInterval to make it always changing but it doesn't work.
Where is my wrong place?
Thx.
function computeRandom(){
var value = new Array(49);//declare array
for ( i = 0; i < 49; i++ )//initial array_value
value[i] = i+1;
for ( i = 0 ;i < 100; i++ ) {//random arrange
x = parseInt(Math.random()*49);
y = parseInt(Math.random()*49);
tmp = value[x];
value[x] = value[y];
value[y] = tmp;
}
var color = new Array(49);
for ( i = 0; i < 49; i++ )//store color
color[i] = "rgb(" + parseInt(Math.random()*255) + "," + parseInt(Math.random()*255) + "," + parseInt(Math.random()*255) + ")";
var value_tmp = new Array(6);
for( i = 0; i < 6; i++)
value_tmp[i] = value[i];
document.write("<div style = \"text-align:center;\" >");//center the text by div
for( i = 0; i < 6; i++)
document.write("<span style = \"font-size: 2.5em; display:inline-block; text-align:center; width: 1.5em; background: white; color: " + color[i] + " \" > "
+ value_tmp[i] + "</span>&nbsp&nbsp&nbsp&nbsp&nbsp");
var spanArray = document.getElementsByTagName("span");
setInterval("keepMove(value,spanArray)",10);
}
function keepMove(val,sp){
var index = parseInt(Math.random()*43);//set a increment to avoid repeatition
for( i = 0; i < sp.length; i++){
sp[i].innerHTML = val[i+index];
document.write(sp[i].innerHTML+" ");
}
}
CSS:
#bg {
background: grey;
opacity: 0.8;
}
#hl {
text-align: center;
color: white;
}
HTML:
sorry I don't know how to post the HTML?
http://codepad.org/IrSOsjg7
I have tried the commentor's advice but still not work but thx for your help!
I very appreciate it!
I think the problem is setInterval("keepMove(value,spanArray)",10)
when you pass a string as the first parameter of setInterval, it's like eval that string, and the code will run in global environment, because there is no variable value and spanArray in the global environment, the code will not run correctly.
For example:
function foo(x, y) {
alert(x + " " + y);
}
function bar() {
var x = 100, y = 200;
setInterval("foo(x, y)", 1000);
}
bar();
this will get the error x is not defined
You can try:
setInterval(function(){
keepMove(value, spanArray);
}, 10);
​
Try to change the way you use the setInterval. You should use a closure to be able to access the value and spanArray vars.
setInterval(function(value, spanArray) {
return function() {
keepMove(value,spanArray)
}
}(value, spanArray),10);
}
That's because setTimeout will be executed on the global context, and from there you can't access those private vars.

Categories

Resources