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)
Related
I'm working on a project where I'd like to create the following pattern:
X
XX
XXX
XXXX
.. and so forth. There are twenty rows in all, and the twentieth row should have 20 X's. Here is what I came up with that's so close:
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="xloop();">Accept</button> <br>
<p id="xloops"></p>
<script>
function xloop() {
let text = "";
for (j=2; j<=20; j++) {
text+= ("X") + ("<br>");
for (k=1; k<j; k++) {
text += ("X");
}
}
document.getElementById("xloops").innerHTML = text;
}
</script>
</body>
</html>
The pattern begins appropriately and does what I want until the very last row. The 20th row only has 19 elements in it, rather than the necessary 20. I have a feeling that this has to do with the "j<k" piece in the k loop being strictly less than j when j equals 20, but any other trial and error combination of indices or inequalities hasn't worked.. is there a way I can remedy this situation using this kind of solution alone without any added complexity?
I think the following will help you:
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="xloop()">Accept</button> <br>
<p id="xloops"></p>
<script>
function xloop() {
let text = "";
for (let j = 0; j < 20; j++) {
let text2 = "";
for (let k = 0; k <= j; k++) {
//row
text2 += "X";
}
//line
text += `${text2}` + "<br>"
}
document.getElementById("xloops").innerHTML = text;
}
</script>
</body>
</html>
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>
Here I tried to push my elements into array but I am not getting output in the p tag. May be there is any mistake in the code. Can someone help me out ?
<script type="text/javascript">
jQuery(document).ready(function()
{
var arr = [];
var text = "";
jQuery("#txtResult").click(function()
{
//var text = "";
//var string = jQuery("#txtPrint").html();
for (i = 0; i < arr.length; i++)
{
if (jQuery("#txtFirstNo").val().length == 5)
{
arr.push("QQQ");
}
if (jQuery("#txtFirstNo").val().length == 5)
{
arr.push("AA");
}
text += arr[i] + "<br>";
}
jQuery("p").html(text);
});
});
</script>
</head>
<body>
<input type="text" id="txtFirstNo" name="txtFirstNo" placeholder="Enter value" />
<input type="submit" id="txtResult"/>
<p id="txtPrint"></p>
</body>
</html>
Simplified, looks like you just wanted smth like this
$("#txtResult").click(function(){
let text = "";
if ($("#txtFirstNo").val().length == 5) {
text = "QQQ" + "<br>" + "AA" + "<br>";
}
$("p").html(text);
}
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>