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);
}
});
Related
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>
I have a jQuery function to fade text in and out one by one. However the function is not working correctly due to I place the text from jQuery. When I try to run it, it is only showing 0. 1 to 4 is not shown.
var html = '<div id="main">';
for (var i = 0; i < 5; i++) {
html += '<div class="trip">' + i + '<div>';
}
html += '</div>';
document.getElementById('todayPrayTime').innerHTML = html;
var $elem = $('#main .trip'),
l = $elem.length,
i = 0;
function go() {
$elem.eq(i % l).fadeIn(700, function() {
$elem.eq(i % l).fadeOut(700, go);
i++;
})
}
go()
.trip {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="todayPrayTime"></div>
Fiddle.
var html = '<div id="main">';
for (var i = 0; i < 5; i++) {
html += '<div class="trip">' + i + '</div>';
}
html += '</div>';
document.getElementById('todayPrayTime').innerHTML = html;
function go($list, i) {
var l = $list.length, $trip = $list.eq(i % l);
$trip.show().fadeIn(700, function(){
$trip.fadeOut(700, function(){
$trip.hide();
if ( ++i < l ) go($list, i);
});
})
}
go($('#main .trip'), 0)
.trip {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="todayPrayTime"></div>
var html = '<div id="main">';
for (var i = 0; i < 5; i++) {
html += '<div class="trip">' + i + '</div>';
}
html += '</div>';
document.getElementById('todayPrayTime').innerHTML = html;
function go($list, i) {
var l = $list.length, $trip = $list.eq(i);
$trip.show().fadeIn(700, function(){
$trip.fadeOut(700, function(){
$trip.hide();
go($list, (++i) % l);
});
})
}
go($('#main .trip'), 0)
.trip {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="todayPrayTime"></div>
I want to skip img tab when i do filter.
I already tested but it is not ok.
It still filter img or src value.
So pls help me.
Here is my code
Filter
app.filter('highlight', function ($sce) {
return function (text, phrase) {
if (phrase) {
var matches = String(text).match(/<img.*?src="([^"]*)"[^>]*>(?:<\/img>)?/m);
var img_src = (matches && matches.length && matches[0]) ? matches[0] : '';
text = text.replace(img_src, "#");
text = text.replace(new RegExp('(' + phrase + ')', 'ig'),
'<span class="highlighted">$1</span>');
text = text.replace("#", img_src);
}
return $sce.trustAsHtml(text)
}
})
Controller
$scope.imgList = [];
imgList.push('<img src="image1.jpg">');
imgList.push('<img src="image2.jpg">');
imgList.push('Using <img src="image1.jpg">“this” instead of “scope” <img src="image3.jpg"/> <p>Post Description <img src="image4.jpg"/></p>');
HTML
<input ng-model="searchText" type="text">
<ul>
<li ng-repeat="img in imgList">
<p ng-bind-html="img | highlight:searchText"></p>
</li>
</ul>
I got the answer.
Filter be like this:
app.filter('highlight', function ($sce) {
return function (text, phrase) {
if (text && phrase) {
var matches = String(text).match(/<img.*?src="([^"]*)"[^>]*>(?:<\/img>)?/g);
if(matches && matches.length != 0){
for(var i = 0; i < matches.length; i++) {
text = text.replace(matches[i], "#_#" + i);
}
}
text = text.replace(new RegExp('(' + phrase + ')', 'ig'), '<span class="highlighted">$1</span>');
if(matches && matches.length != 0){
for(var i = 0; i < matches.length; i++) {
text = text.replace("#_#" + i, matches[i]);
}
}
}
return $sce.trustAsHtml(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>
Why are the class="col" classes not causing the data to show as a row containing 3 columns?
https://jsfiddle.net/bobbyrne01/b63g4kpe/1/
Html:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
<div id="results"></div>
Js:
document.getElementById('results').innerHTML += '<div class="container">';
document.getElementById('results').innerHTML += '<div class="row">';
for (var i = 0; i < 3; i++) {
document.getElementById('results').innerHTML += '<div class="col">';
document.getElementById('results').innerHTML += i + ' Col';
}
document.getElementById('results').innerHTML += '</div>';
document.getElementById('results').innerHTML += '</div><br/>';
document.getElementById('results').innerHTML += 'After container';
Your js is not rendering properly as mentioned by others. I have shown a way to achieve this in the following example. Here I have created divs and appended them as children one after another.
Example Snippet
$(document).ready(function() {
var res = document.getElementById('results');
var con = document.createElement('div');
con.className = 'container-fluid';
var newdiv = document.createElement('div');
newdiv.className = 'row';
res.appendChild(con);
con.appendChild(newdiv);
for (var i = 0; i < 3; i++) {
var con1 = document.createElement('div');
con1.className = 'col-md-4 col-xs-4';
newdiv.appendChild(con1);
var text = document.createTextNode(i + ' Col');
con1.appendChild(text);
}
document.getElementById('results').innerHTML += 'After container';
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="results">
</div>
Because the syntax is (for example) col-md-4 also you are closing your row div too early. UPDATE: In fact it's somewhat worse than that, your output renders as:
<div id="results">
<div class="container">
</div>
<div class="row"></div>
<div class="col"></div>0 Col
<div class="col"></div>1 Col
<div class="col"></div>2 Col<br>
After container
</div>
You forgot to include the GRID column correctly. You wrote <div class="col">. You should write class like col-lg-* or col-md-* or col-sm* inside div tag. Replace these * with number from 1-12. Hope this answer your question and i have provided you the code below.
document.getElementById('results').innerHTML += '<div class="container">';
document.getElementById('results').innerHTML += '<div class="row">';
document.getElementById('results').innerHTML += '<div class="col-xs-12 col-lg-12">';
for (var i = 0; i < 3; i++) {
document.getElementById('results').innerHTML += '<div class="col-xs-4 col-lg-4"> Column ' + (i + 1) + '</div>';
}
document.getElementById('results').innerHTML += '</div>';
document.getElementById('results').innerHTML += '</div>';
document.getElementById('results').innerHTML += '</div><br/>';
document.getElementById('results').innerHTML += 'After container';
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<head>
<body>
<div id="results"></div>
</body>