for (i = 0; i < arrayData.length; i++) {
$(".swipe-wrap").append("<div class=\"final\">Hello!</div>");
console.log('hello');
}
This is what I currently have. My arrayData is an array that changes each load.
How can I get it so my class final each for loop will have an counter like such : <div class="final_1">Hello!</div> , <div class="final_2">Hello!</div>..
for (i = 0; i < arrayData.length; i++) {
$(".swipe-wrap").append("<div class=\"final_"+i+"\">Hello!</div>");
console.log('hello');
}
You should not perform DOM manipulation inside loops. Always perform bulk operation.
Try this:
var html = ""
for (i = 0; i < arrayData.length; i++) {
html += '<div class="final_'+i+'">Hello!</div>';
console.log('hello');
}
$(".swipe-wrap").append(html);
You can also use Array.forEach.
var html = ""
var arrayData = ["test1", "test2", "test3", "test4", "test5"];
console.log(arrayData);
arrayData.forEach(function(item, index) {
html += '<div class="tile final_' + index + '">Hello ' +item+ '!</div>';
console.log('hello');
});
$(".swipe-wrap").append(html);
.swipe-wrap {
background: #eee;
padding: 10px;
border: 1px solid gray;
}
.tile {
width: auto;
padding: 10px;
margin: 10px;
background: #fff;
border: 1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="swipe-wrap"></div>
Related
I'm making a bulletin board now. Above is the template code for it, where page function has NaN. What is the reason for this error, and how should I fix it?
The code below is written in node.js.
module.exports = {
HTML:function(title, board, control, page){
return `
<!DOCTYPE html>
<html>
<head>
<title>${title}</title>
<meta charset="utf-8">
<style type="text/css">
ul.board, ol.board {
list-style: none;
margin: 0px;
padding: 5px;
}
form {
display: inline;
}
table.type09 {
border-collapse: separate;
text-align: left;
line-height: 2;
}
table.type09 thead th {
padding: 10px;
font-weight: bold;
vertical-align: top;
color: #369;
border-bottom: 3px solid #003699;
}
table.type09 tbody th {
width: 150px;
padding: 10px;
font-weight: bold;
vertical-align: top;
border-bottom: 1px solid #ccc;
background: #f3f6f7;
}
table.type09 td {
width: 350px;
padding: 10px;
vertical-align: top;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="board">
<table class="type09">
<thead>
<tr>
<th>제목</th>
<th>작성자</th>
<th>날짜</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
${board}
</tbody>
</table>
${control}
</div>
${page}
</body>
</html>`;
},board: function (lifeboards) {
var board = ``;
for (i = 0; i < lifeboards.length; i++) {
var article = lifeboards[i];
var titleBold = article.titleBold;
board += `<tr>`;
if(titleBold == "1") {
board += `<td> <b><공지>${article.title}</b> </td>`;
board += `<td>${article.writer}</td>`;
board += `<td>${article.day}</td>`;
board += `<td>${article.see}</td>`;
board += `</tr>`;
}
}
for (i = 0; i < lifeboards.length; i++) {
var article = lifeboards[i];
var titleBold = article.titleBold;
board += `<tr>`;
if(titleBold == "1") {
board += `<td> ${i+1}. <b>${article.title}</b> </td>`;
} else if(titleBold == "0") {
board += `<td>${i+1}. ${article.title}</td>`;
}
board += `<td>${article.writer}</td>`;
board += `<td>${article.day}</td>`;
board += `<td>${article.see}</td>`;
board += `</tr>`;
}
return board;
},page:function (lifeboards) {
var page = ``;
page =+ `<tr>`;
page =+ `<td colspan="5">`;
for(j = 0; j < lifeboards.length/5; j++) {
page =+ `[${j+1}]`;
}
page =+ `</td>`;
page =+ `</tr>`;
return page;
}
}
The picture below shows how it works.
I don't know how much more detail Stackoverflow wants, but this is all my code and there's nothing more to explain.
Please use this one , you need to add concat ( + ) operator first then =. e.g. +=
page: function (lifeboards) {
var page = ``;
page += `<tr>`;
page += `<td colspan="5">`;
for (j = 0; j < lifeboards.length / 5; j++) {
page += `[${j + 1}]`;
}
page += `</td>`;
page += `</tr>`;
return page;
}
Hope this will solve the issue.
I am trying to create a set of elements from CMS. I have reproduced the problem here with a set of rectangles that are being generated in Javascript. How can I dynamically add a "onmouseover" method to each one of them, that changes the colour of the block hovered?
for (i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
coloured_div.id = "coloured_div" + i;
document.getElementById("body").appendChild(coloured_div);
coloured_div.addEventListener("mouseover", hoverCube);
}
function hoverCube(i) {
document.getElementById("coloured_div" + i).style.backgroundColor = "orange";
}
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
<body id="body">
</body>
As you're passing hoverCube as a callback to your event listener, it automatically gets passed an object which has information about the event (e). From this information, you can get the element which triggered the event by doing (e.target), which you can then set the style of:
for (var i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
coloured_div.id = "coloured_div" + i;
document.getElementById("body").appendChild(coloured_div);
coloured_div.addEventListener("mouseover", hoverCube);
}
function hoverCube(e) {
e.target.style.backgroundColor = "orange";
}
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
<body id="body">
</body>
Alternatively, to achieve what you're trying to do in your code, you need to pass i as a parameter to hoverCube, which will then be able to access the correct element:
for (var i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
coloured_div.id = "coloured_div" + i;
document.getElementById("body").appendChild(coloured_div);
coloured_div.addEventListener("mouseover", (function(i) { // ES5 closure (if using ES6 you can simply change var i to let i in the for loop)
return function() {
hoverCube(i);
};
})(i)
)}
function hoverCube(i) {
document.getElementById("coloured_div" + i).style.backgroundColor = "orange";
}
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
<body id="body">
</body>
Append event listener to all elements. Select them with querySelectorAll. No ids needed.
for (i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
document.getElementById("body").appendChild(coloured_div);
}
document.querySelectorAll('.col_div_class').forEach(function(el) {
el.addEventListener('mouseover', function(e) {
e.currentTarget.style.backgroundColor = "orange";
});
});
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
<body id="body"></body>
You have 2 options here. The first is to use just CSS to accomplish the task.
for (i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
coloured_div.id = "coloured_div" + i;
document.getElementById("body").appendChild(coloured_div);
}
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
.col_div_class:hover {
background-color: orange;
}
<body id="body">
</body>
If you must use Javascript, please see below.
for (i = 0; i < 5; i++) {
var coloured_div = document.createElement("div");
coloured_div.className = "col_div_class";
coloured_div.id = "coloured_div" + i;
document.getElementById("body").appendChild(coloured_div);
coloured_div.addEventListener("mouseover", function(e){e.currentTarget.style.backgroundColor = "orange";});
coloured_div.addEventListener("mouseout", function(e){e.currentTarget.style.backgroundColor = "yellow";});
}
.col_div_class {
width: 250px;
height: 250px;
background-color: yellow;
border: solid white 5px;
}
<body id="body">
</body>
Hello guys I hope you can help me with JavaScript, I'm trying to itarate over some divs, the issue is that when I iterate sometimes a div never change to the other divs, it suppose to be infinite, I will recive thousands of different divs with different height and it should create an other div container in the case it does not fits but I can not achieve it work's, I'm using Vanilla JavaScript because I'm lerning JavaScript Regards.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.big_container{
height: 600px;
width: 150px;
background-color: #f1f1f1;
float: left;
}
.items{
background-color: gray;
height: 50px;
}
.new_container{
margin-bottom: 10px;
height: 300px;
width: 150px;
background-color: red;
float: left;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="big_container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
<div class="items">10</div>
<div class="items">11</div>
<div class="items">12</div>
<div class="items">13</div>
</div>
<div class="new_container">
</div>
</body>
<script>
number = 0
sum = 0
new_container = document.getElementsByClassName('new_container')[number].offsetHeight
divs = document.getElementsByClassName('items')
for ( var i = 0; i < divs.length; i++ ){
sum += this.document.getElementsByClassName( 'items' )[0].offsetHeight
if ( sum <= new_container ){
console.log(sum, "yes")
document.getElementsByClassName("new_container")[number].appendChild( this.document.getElementsByClassName( 'items' )[0] )
} else {
sum = 0
console.log(sum, "NO entra")
nuevo_contenedor = document.createElement('div'); // Creo un contenedor
nuevo_contenedor.className = "new_container";
nuevo_contenedor.setAttribute("style", "background-color: red;");
document.body.appendChild(nuevo_contenedor)
number += + 1
}
}
</script>
</html>
I really apreciate a hand.
I know that I'm late, but there is my approach how this can be done.
// generate items with different height
function generateItems(count) {
const arr = [];
for (let i = 0; i < count; i++) {
const div = document.createElement("DIV");
const height = Math.floor((Math.random() * 100) + 10);
div.setAttribute("style", `height: ${height}px`);
div.setAttribute("class", "items");
const t = document.createTextNode(i + 1);
div.appendChild(t);
arr.push(div);
}
return arr;
}
function createNewContainer(height) {
const new_container = document.createElement("DIV")
new_container.setAttribute("class", "new_container");
new_container.setAttribute("style", `height: ${height}px`)
document.body.appendChild(new_container);
return new_container;
}
function breakFrom(sourceContainerId, newContainerHeight) {
const srcContainer = document.getElementById(sourceContainerId);
const items = srcContainer.childNodes;
let new_container = createNewContainer(newContainerHeight);
let sumHeight = 0;
for (let i = 0; i < items.length; i++) {
let item = items[i];
if (item.offsetHeight > newContainerHeight) {
// stop!!! this item too big to fill into new container
throw new Error("Item too big.");
}
if (sumHeight + item.offsetHeight < newContainerHeight) {
// add item to new container
sumHeight += item.offsetHeight;
new_container.appendChild(item.cloneNode(true));
} else {
// create new container
new_container = createNewContainer(newContainerHeight);
new_container.appendChild(item.cloneNode(true));
// don't forget to set sumHeight)
sumHeight = item.offsetHeight;
}
}
// if you want to remove items from big_container
// for (let i = items.length - 1; i >= 0; i--) {
// srcContainer.removeChild(items[i]);
// }
}
// create big container with divs
const big_container = document.getElementById("big_container");
const items = generateItems(13);
items.forEach((div, index) => {
big_container.appendChild(div);
});
breakFrom("big_container", 300);
#big_container {
width: 150px;
background-color: #f1f1f1;
float: left;
}
.items {
background-color: gray;
border: 1px solid #000000;
text-align: center;
}
.new_container {
margin-bottom: 10px;
height: 300px;
width: 150px;
background-color: red;
border: 1px solid red;
float: left;
margin-left: 5px;
}
<div id="big_container"></div>
This example gives you the ability to play with divs of random height. Hope, this will help you.
I want to print a lot of numbers ONE-BY-ONE with AJAX.
something like this: (each new line is update of previous line!)
output is:
1
12
123
1234
12345
123456
...
I tried a lot and read a lot of this same problem, but i couldn't find my right Answer.
The real problem is every FOR LOOP in javascript will NO affect the DOM after it will END the loop. I just want update the DOM inside the FOR LOOP while working on a long running job.
Please look at my code.
$("#btn").on("click", dowork);
function dowork() {
document.getElementById("foo").innerHTML = "working";
setTimeout(function() {
var counter = 100; // i want assign counter = 2000000000
for (var i = 0; i < counter; i++) {
document.getElementById("print_here").innerHTML += i;
}
document.getElementById("foo").innerHTML = "done!";
}, 50);
}
#btn {
background: #1f1f1f;
padding: 10px;
font-weight: bolder;
color: #fff;
width: 50%;
margin: auto;
margin-top: 10px;
text-align: center;
cursor: pointer;
}
#print_here {
overflow-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">CLICK TO DO WORK</div>
<div id="foo"></div>
<div id="print_here"></div>
Thanks for any answer and help to solve this problem.
Your DOM is "locked" while it is being updated and redrawn ones the loop is done. You can free up the resource to let the DOM update each time wrapping your DOM change in a setTimeout, similar to:
setTimeout(function(){
document.getElementById("print_here").innerHTML += i;
},1);
To ensure setTimeout uses the correct value for i use let i instead of var i
$("#btn").on("click", dowork);
function dowork() {
document.getElementById("foo").innerHTML = "working";
var counter = 3000; // i want assign counter = 2000000000
for (let i = 0; i < counter; i++) {
setTimeout(function() {
document.getElementById("print_here").innerHTML += i;
}, 1);
}
document.getElementById("foo").innerHTML = "done!";
}
#btn {
background: #1f1f1f;
padding: 10px;
font-weight: bolder;
color: #fff;
width: 50%;
margin: auto;
margin-top: 10px;
text-align: center;
cursor: pointer;
}
#print_here {
overflow-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">CLICK TO DO WORK</div>
<div id="foo"></div>
<div id="print_here"></div>
I want change the #foo into "done!" after the FOR statement is END
You could check if you are at your last item you process within the setTimeout, similar to:
if (i == counter - 1){
document.getElementById("foo").innerHTML = "done!";
}
$("#btn").on("click", dowork);
function dowork() {
document.getElementById("foo").innerHTML = "working";
var counter = 3000; // i want assign counter = 2000000000
for (let i = 0; i < counter; i++) {
setTimeout(function() {
document.getElementById("print_here").innerHTML += i;
if (i == counter - 1){
document.getElementById("foo").innerHTML = "done!";
}
}, 1);
}
}
#btn {
background: #1f1f1f;
padding: 10px;
font-weight: bolder;
color: #fff;
width: 50%;
margin: auto;
margin-top: 10px;
text-align: center;
cursor: pointer;
}
#print_here {
overflow-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">CLICK TO DO WORK</div>
<div id="foo"></div>
<div id="print_here"></div>
You need to let the call stack complete so the browser can do its work on the page. If you bog down the one main thread, page updates aren't going to occur.
One way to do this is use setImmediate or nextTick. This is non-standard, so check this polyfill: https://www.npmjs.com/package/browser-next-tick
Basically, you do an iteration, then tell the browser to do the next iteration as soon as possible... and this occurs on a fresh call stack.
Here is the working code for you:
$("#btn").on("click", dowork);
function dowork() {
document.getElementById("foo").innerHTML = "working";
setTimeout(function() {
var i, j, row = 5;
var html = "";
for (i = 1; i <= row; i++) {
for (j = 1; j <= i; j++) {
html += "<span>" + j + "</span>";
}
html += "</br>";
}
console.log(html);
document.getElementById("print_here").innerHTML = html;
}, 50);
}
#btn {
background: #1f1f1f;
padding: 10px;
font-weight: bolder;
color: #fff;
width: 50%;
margin: auto;
margin-top: 10px;
text-align: center;
cursor: pointer;
}
#print_here {
overflow-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">CLICK TO DO WORK</div>
<div id="foo"></div>
<div id="print_here"></div>
Rows is the number of rows you want to print.
I want to create a pyramid like structure on a page from the user input, and the structure should appear like this,
I tried to loop in JS to display the structure but can't change the css property in JS loop according to user input. Here is the code on this page :
var objContainer = document.getElementById("container"),
intLevels = 10,
strBlocksHTML = '';
for (var i = 0; i < intLevels; i++) {
strBlocksHTML += '<div class="buildingBlock"></div>';
strBlocksHTML += '<div></div>'; // Line break after each row
}
objContainer.innerHTML = strBlocksHTML;
.buildingBlock {
display: inline-block;
width: 20px;
height: 20px;
margin: 2px 5px;
background-color: #eee;
border: 2px solid #ccc;
}
#container {
text-align: center;
}
<div id="container"></div>
The output is displayed as a tower and also want to remove the spacing between each <div> element. How can I change this by using jquery or by some other method ? The above image is the desired output that I want.
By changing the first strBlocksHTML row to
strBlocksHTML += '<div class="buildingBlock" style="width: ' + Number(20 + 40 * i) + 'px"></div>';
it works.
you need to do some thing like this
for( var i=0; i<intLevels; i++ ){
var wd = 20 * i;
strBlocksHTML += '<div class="buildingBlock" style="width:'+wd+'px"></div>';
strBlocksHTML += '<div></div>'; // Line break after each row
}
var objContainer = document.getElementById("container"),
intLevels = 10,
strBlocksHTML = '';
for (var i = 0; i < intLevels; i++) {
var wd = 20 * i;
strBlocksHTML += '<div class="buildingBlock" style="width:' + wd + 'px;"></div>';
strBlocksHTML += '<div></div>'; // Line break after each row
}
objContainer.innerHTML = strBlocksHTML;
.buildingBlock {
display: inline-block;
width: 20px;
height: 20px;
margin: 2px 5px;
background-color: #eee;
border: 2px solid #ccc;
margin-top: -20px;
}
#container {
text-align: center;
}
<div id="container"></div>
you can allign these closer by using css
You could simple set the width via the style attribute on each created div, and calculate it dynamically – I’ve change your loop to run backwards, something like this:
for(var i=intLevels; i>0; --i) {
strBlocksHTML += '<div class="buildingBlock" style="width:'+(250-i*20)+'px"></div>';
}
Change the values (250px width from which i*20 gets subtracted) as you see fit, resp. calculate them dynamically based on the number of pyramid levels wanted.
And also you do not need the empty divs for line breaks – just keep your divs as display:block, and set the margin to auto to center them.
var objContainer = document.getElementById("container"),
intLevels = 10,
strBlocksHTML = '';
for (var i = intLevels; i > 0; --i) {
strBlocksHTML += '<div class="buildingBlock" style="width:' + (250 - i * 20) + 'px"></div>';
}
objContainer.innerHTML = strBlocksHTML;
.buildingBlock {
height: 20px;
margin: auto;
background-color: #eee;
border: 2px solid #ccc;
}
#container {
text-align: center;
}
<div id="container"></div>
var objContainer = document.getElementById("container"),
intLevels = 10,
strBlocksHTML = '';
for (var i = 0; i < intLevels; i++) {
strBlocksHTML += '<div class="buildingBlock" style="width:' + (10 * i) + 'px"></div>';
//strBlocksHTML += '<div></div>'; // Line break after each row
}
objContainer.innerHTML = strBlocksHTML;
.buildingBlock {
display: block;
width: 20px;
height: 20px;
margin: 0 auto;
background-color: #eee;
border: 2px solid #ccc;
}
#container {
text-align: center;
}
<div id="container"></div>