I have created a dynamic div which is rendered 19 times. I want to print the ID of iterator (i) in inner html dynamic Div. Can anyone please help me. Below is my code
var d1 = document.getElementById("div1");
for (var i = 0; i < 20; i++) {
d1.innerHTML += '<div class="box">Print i here</div>';
}
<h2>My Loop Printing Divs</h2>
<div id="div1"></div>
You can use variable directly like:
var d1 = document.getElementById("div1");
for (var i = 0; i < 20; i++) {
d1.innerHTML += '<div class="box">Print ' + i + ' here</div>';
}
<h2>My Loop Printing Divs</h2>
<div id="div1"></div>
you can used this way string ${js code} string
var d1 = document.getElementById("div1");
for (var i = 0; i < 20; i++) {
d1.innerHTML += `<div class="box">Print ${i} here</div>`;
}
<h2>My Loop Printing Divs</h2>
<div id="div1"></div>
Related
I am trying to print a 2-d array that i get from an http request to the variable value using this code
<table style="width:100%">
<tr>
<th>Name</th>
<th>Age</th>
<th>School</th>
</tr>
<script>
var x ="", i;
var y ="", j;
for (i=0; i<value.length; i++) {
x ="<tr>" +
for (j=0; j<3; j++){
y = "<td>" + {{ value[i][j] }} + "</td>";
}
+ "</tr>";
}
</script>
</table>
Any ideas why it isn't working? :P
Tag <script> not displayed in any way, you need to use JavaScript methods for DOM manipulation
const values = [
["name1", "age1", "school1"],
["name2", "age2", "school2"],
];
const tbody = document.querySelector("tbody");
for (let i = 0; i < values.length; i++) {
const tr = document.createElement("tr");
const fields = values[i];
for (let j = 0; j < fields.length; j++) {
const field = fields[j];
const td = document.createElement("td");
td.textContent = field;
tr.appendChild(td);
}
tbody.appendChild(tr);
}
<table style="width: 100%;">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>School</th>
</tr>
</thead>
<tbody></tbody>
</table>
You are trying to concatenate string with a for loop. You cannot do that. Also, declare i and j variables inside the for loop so they are automatically removed when the loop is done. You do not need the y variable because you can create a long string as x and then use it as innerHTML somewhere. Lastly, the value array was incorrectly used. {} is used to create an object. For example var b = {}; When you want to actually use the object, you refer to it by its name, but you said you have an array already.
<script>
var x ="";
for (var i=0; i<value.length; i++) {
x +="<tr>";
for (var j=0; j<value[i].length; j++){
x += "<td>" + value[i][j] + "</td>";
}
x += "</tr>";
}
//use your output x variable here
</script>
i write this code, it's right but show nan error after Advertising img.
Does anyone know where this error comes from and how can I fix it?
my code in html:
<div>
<ul class="list-groupJournalList">
</ul>
</div>
my code in jquery:
jQuery(document).ready(function ($) {
for (var i = 1; i <= 100; i++) {
inner1 = ('<li class= "list-group-item">' +
'<div class="col-xs-12 article-wrapper">' + '</div>' +
'</li>');
advboxx = ('<li><div class="advertising-SearchReasultBox">' +
'<img src="../FrontEnd/media/image/Sid-adv1-moavenatelmi.gif" height="80"/>' +
+'</div></li>');
for (k = 1; k < 3; k++) {
$('.list-groupJournalList').append(inner1);
}
$('.list-groupJournalList').append(advboxx);
}
The output is similar to the image below:
nan error in image
I think you forgot to close your function, the "for" loop and there's an extra "+" here at the beginning of the 3rd line :
advboxx = ('<li><div class="advertising-SearchReasultBox">' +
'<img src="../FrontEnd/media/image/Sid-adv1-moavenatelmi.gif" height="80"/>' +
+'</div></li>');
Try this :
jQuery(document).ready(function ($) {
for (var i = 1; i <= 100; i++) {
inner1 = '<li class= "list-group-item"> <div class="col-xs-12 article-wrapper"> </div> </li>';
advboxx = '<li><div class="advertising-SearchReasultBox"> <img src="../FrontEnd/media/image/Sid-adv1-moavenatelmi.gif" height="80"/> </div> </li>';
for (k = 1; k < 3; k++) {
$('.list-groupJournalList').append(inner1);
}
$('.list-groupJournalList').append(advboxx);
}
});
I have
<div id="example">HELLO WORLD</div>
I need to show this contents 25 times on the same page.
How do I achieve that, please?
Id must be unique. Use :
<div id="example_1">HELLO WORLD</div>
<div id="example_2">HELLO WORLD</div>
https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/id
A simple while loop will do.
var i = 0;
while (i < 25) {
text += "<br><div>content</div> ";
i++;
}
document.getElementById("example").innerHTML = text;
try like this.
function render(count) {
const htmlStr = `<div id="example">HELLO WORLD</div>`
let finalStr = '';
for (let i=1; i<=count; i++) {
finalStr += htmlStr
}
document.querySelector('body').innerHTML = finalStr;
}
call this function - render(25)
I am trying to write program that lists all numbers from 0-15 add whether the number is even odd (i.e. "0 is even, 1 is odd", etc.). I'm doing for my AP Computer Science Principles class and need to use a for loop in order to get full credit. I typed it like so:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Loops</h2>
<p id="p"></p>
<script>
var text = "";
var i;
for (i = 0; i < 16; i++) {
text += i + " is even" + "<br>";
}
document.getElementById("p").innerHTML = text;
</script>
</body>
</html>
but it outputs each integer value of i as even, like so:JS Loops Output How should I go about determining whether each integer value of I is even or odd? I tried using an else if statement in the for loop, but it made it not output anything.
<script>
let text = "";
let i;
for (i = 0; i < 16; i++) {
if (i % 2 == 0) {
text += i + " is even" + "<br>";
} else {
text += i + " is odd" + "<br>";
}
}
document.getElementById("p").innerHTML = text;
</script>
I need to generate 398 lines of html code. This is the first line:
{<img src="images/blackcelebratory/2014/001.jpg"/>}
then I need to increment the image name up to 398.jpg. So the name of the image on the last line would be:
.../398.jpg
Is there a way, using a text editor, or Dreamweaver, or a bit of code, to automate generating these lines of code?
<?php
for ($x=0; $x<=398; $x++) {
echo "<img src="images/blackcelebratory/2014/". $x .".jpg"/>";
}
?>
In jquery:
for(var i = 1; i<399; i++){
$("body").append("<img src='images/blackcelebratory/2014/"+i+".jpg' />");
}
Try a loop: JSFIDDLE
<script>
for(i = 1; i < 399; i++) {
var img = document.createElement('IMG');
var j = i.toString();
var num = [0, 0].slice(0, j.length < 4 ? 3 - j.length : 0).join('') + j;
img.src = "images/blackcelebratory/2014/" + num + ".jpg";
document.body.appendChild(img);
}
</script>