I have a div that its content is pulled from innerhtml as shown
var users = '';
for (var i = 0; i < json.length; i++) {
users += '<strong>' + json[i].name + '</strong><br/>';
}
users_container.innerHTML = users;
}
this is the div that the innerhtml replaces its content. The content of the div only displays for some seconds and disappears.
<div id="users-container" class="inner-container">
<h3>Active users</h3>
</div>
Please how can I retain the content of the div as a header while the innerhtml contents is displayed as well. Kindly assist!
html
<div id="users-container" class="inner-container">
<h3>Active users</h3>
<div id="usersList"></div>
</div>
script
var users = '';
for (var i = 0; i < json.length; i++) {
users += '<strong>' + json[i].name + '</strong><br/>';
}
usersList.innerHTML = users;
}
You can use a specific div for the users content and keep the original content of your div.
JavaScript:
var users_div = document.getElementById("users_div");
var users = '';
for (var i = 0; i < json.length; i++) {
users += '<strong>' + json[i].name + '</strong><br/>';
}
users_div.innerHTML = users;
}
HTML:
<div id="users-container" class="inner-container">
<h3>Active users</h3>
<div id="users_div">
</div>
</div>
Related
I have a <div id="incontent"></div> in which I am generating elements using javascript... here is my script :
var lastId = 0; // initialise ID
function MyFunction( var1, var2, var3) {
const incontent = document.getElementById('incontent');
incontent.innerHTML+= var1 + var2 + (var3 ? ' (var3=' + var3 + ')' : '');
if (var3 === 'descforalink') {
incontent.innerHTML += `<div class="contentLink"><p>a link</p></div></div>`;
}
}
//manages the click on possible
document.getElementById('incontent').addEventListener('click', function (e) {
lastId++ ; // for a different ID
});
// element in which to instantiate the contentDATA for another rendering...
const contentDATA = document.getElementById('contentDATA');
// contentDATA content is received
contentDATA.addEventListener(MyMouv.Descperso, ({ data }) => {
var divques1 = '<div class="contentDesc col-12"><p>';
var divques2 = '</p>';
var divques3 = '</div>';
var contentallbtns = '';
var contentbtnsbefore = '<div class="col-12 contentLink">';
var contentbtnsafter = '</div></div>';
MyFunction('', divques1 + data.text + divques2 , data.var3, divques3);
// if actions buttons/links
if (data.actions) {
var btns = '';
for (var i = 0; i < data.actions.length; i++) { if (i> 0) {btns += ' ';}
let act = data.actions[i];
btns += '<a class="mybtn"' + ' data-val="' + act.value + '">' + act.title + '</a>';
contentallbtns = contentbtnsbefore + btns + contentbtnsafter;
}
MyFunction('',contentallbtns);
}
//building tags
var startB = document.createElement('section');
var myiddesc = 'iddesc-'+lastId ;
startB.setAttribute('id', myiddesc );
startB.setAttribute('class', 'thesection');
document.getElementById('incontent').appendChild(startB);
var startB2 = document.createElement('div');
startB2.setAttribute('class', 'container');
startB.appendChild(startB2);
var startB3 = document.createElement('div');
startB3.setAttribute('class', 'row MyRow');
startB2.appendChild(startB3);
document.querySelector('div.MyRow').appendChild(document.querySelector('div.contentDesc'));
document.querySelector('div.MyRow').appendChild(document.querySelector('div.contentLink'));
});
This generates the first time a structure of this type:
<section id="iddesc-0" class="thesection">
<div class="container">
<div class="row MyRow">
<div class="contentDesc">
<p>Hello World</p>(var3=descforalink)
</div>
<div class="contentLink">
<p>a link</p>
</div>
</div>
</div>
</section>
This is what I want ... but when another section is created, with actions, this structure appears:
<section id="iddesc-0" class="thesection">
<div class="container">
<div class="row MyRow">
<div class="contentDesc">
<p>Hello World</p>(var3=descforalink)
</div>
<div class="contentLink">
<p>a link</p>
</div>
</div>
</div>
</section>
<div class="contentDesc">
<p>Hello World</p>(var3=descforalink)
</div>
<div class="contentLink">
<a class="mybtn" data-val="banana">banana</a><a class="mybtn" data-val="orange">orange</a>
</div>
<section id="iddesc-1" class="thesection">
<div class="container">
<div class="row MyRow">
</div>
</div>
</section>
so the appendchild() on document.querySelector('div.MyRow').appendChild(document.querySelector('div.contentDesc')); document.querySelector('div.MyRow').appendChild(document.querySelector('div.contentLink'));only works once ... how can i change that? Always place my div div class="contentDesc" and class="contentLink" in the div class="row MyRow" ? Thank you for your help...
If you use appendChild on an element that's already in the DOM, it moves the element from where it is to the new location. It doesn't make a copy of it.
If you want to make a copy and then append the copy, use cloneNode(true):
document.querySelector('div.MyRow').appendChild(
document.querySelector('div.contentDesc').cloneNode(true)
);
document.querySelector('div.MyRow').appendChild(
document.querySelector('div.contentLink').cloneNode(true)
);
but, I'm not sure you really want to do that. You're creating a new section which you're referencing a startB but then you aren't appending startB to anything. Perhaps you meant to append it instead of one of the above.
i am new on using of JavaScript on looping of html. I have this code below that i am working at. In this problem of mine i have 2 loop the main and the card-body loop. As you can see in the code First I need to loop the main to create a card and then at the body i need also to loop it because of the data content. I have also working code below but as you can see at the card-body its not looping anymore but static data that I inputted.
Problem
for (var i = 0; i < dataLength; i++) {
var docsLength = data.data[i].resultData;
var title = data.data[i].resultData[i].Type.Description;
var card = '<div class="card"> <div class="card-header bg-success"><h3 class="card-title">' + title + ' </h3 ></div> <div class="card-body">'; for (var a = 0; a < 2; a++) { "a" } ' </div>' +
'</div >';
$("#card_documents > .card-body").append(card);
}
Working
for (var i = 0; i < dataLength; i++) {
var docsLength = data.data[i].resultData;
var title = data.data[i].resultData[i].Type.Description;
var card = '<div class="card"> <div class="card-header bg-success"><h3 class="card-title">' + title + ' </h3 ></div> <div class="card-body">' +
"asdasdasdasd" +
'</div > ' +
'</div >';
$("#card_documents > .card-body").append(card);
}
Is my syntax wrong?. Please help. Thanks
You can replace for (var a = 0; a < 2; a++) { "a" } with "a".repeat(2).
More info about repeat() here
Yes, your syntax is wrong. Specifically the way you're trying to use the for loop.
I would suggest building up the string in a variable.
Here is a stripped down version of how you might achieve that.
var card = '<div class="card">';
for (var a = 0; a < 2; a++) {
card += "a";
}
card += '</div>';
$("#card_documents > .card-body").append(card);
I try to create LocalStorage data for My Folder Creation .
HTML :
This is my default li. I call it All audience folder's
<!-- Result goes here -->
<ul class="nav">
<li>
<div class="zf-folder" style="width: 232px;">
<div class="_tabFolder _itemPosition" style="height: 50px;border-bottom:1px groove; user-select: none;">
<div class="_sideFolder"></div>
<div class="_iconText" style="width: 215px">
<div class="ellipsis">
<div class="_1i5w">
<div class="_icon-col">
</div>
</div>
All Audiences<span class="hyperspan" style="position:absolute; width:100%; height:100%; left:0; top:0;"></span>
</div>
</div>
</div>
</div>
</li>
</ul>
jQuery :
var count = 1;
$(".submitButton").click(function() {
let label = count++;
// make a function that returns the DOM with updated count
function getNewList(foldername) {
var addFolder = '<li>' +
'<div class="zf-folder" style="width: 232px;">' +
'<div class="_tabFolder _itemPosition" style="height: 50px;border-bottom:1px groove; user-select: none;">' +
'<div class="_sideFolder"></div>' +
'<div class="_iconText" style="width: 215px">' +
'<div class="ellipsis">' +
'<div class="_iconFolder">' +
'<div class="_icon-col">' +
'</div>' +
'</div>' +
'<a href="#folder' + label +
'" data-toggle="tab" style="text-decoration: none;">' +
foldername + '<span class="hyperspan" style="width:100%; height:100%; left:0; top:0;"></span></a>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</li>';
return addFolder;
}
var inputan = $("#input_nameFolder").val();
// update the result array
var result = JSON.parse(localStorage.getItem("folderList"));
if (result == null) {
result = [];
}
let newfolderHTML = getNewList(inputan);
result.push({
folder: newfolderHTML
});
// save the new result array
localStorage.setItem("folderList", JSON.stringify(result));
// append the new li
$(".nav").append(newfolderHTML); // i want include myDiv
//clear input
$("#input_nameFolder").val('');
});
// on init fill the ul
var result = JSON.parse(localStorage.getItem("folderList"));
if (result != null) {
//get the nav reference in DOM
let nav = $(".nav");
//clear the html contents
nav.html('');
for (var i = 0; i < result.length; i++) {
var item = result[i];
$(".nav").append(item.folder);
}
}
How to adding new <li> tag under my default li (all audience)
after reload page/click run jsfiddle when user input a new value?
You can see after adding an input and reload web / jsfiddle, new input folder's (second li) overwrite all audience (first li).
JSFiddle
you just have to save the initial element upon initialization, see:
// on init fill the ul
var result = JSON.parse(localStorage.getItem("folderList"));
if (result != null) {
//get the nav reference in DOM
let nav = $(".nav");
//clear the html contents
nav.html('');
for (var i = 0; i < result.length; i++) {
var item = result[i];
$(".nav").append(item.folder);
}
} else {
//Save the "All Audiences" content upon empty folderList
let initialElement = [];
initialElement.push({
folder: $('ul.nav').html()
});
localStorage.setItem("folderList", JSON.stringify(initialElement));
}
See: JSFiddle
I'm building a memory game in HTML & JS where you guess 2 different images and try to pick 2 same ones.
I'm stuck with putting an onclick function to a hidden image.
Here is my code so ill try to explain better...
var table = '';
for(var i = 0; i < 4; i++){
table += '<tr>';
for(var j = 0; j < 3; j++){
table += '<td align="center"><img src="./pics/image_part_00' + Math.floor((Math.random() * 6) + 1) + '.jpg";" width="100px"" onclick="clicked(this);" style="visibility: hidden;"></td>';
}
table += '</tr>';
}
document.getElementById('theGame').innerHTML = '<table border=1 cellpadding="10" class="tabela1">' + table + '</table>'
Now what im trying to do is to overwrite that visibility: hidden; so the image is visible when clicked....
And here is the function
function clicked(element){
element.style.visibility = "visible";
}
but it doesn't work because with that element.style.visibility im changing the visibility of a table cell.
Anyone got a solution? I'm probably missing something and can't figure it...
NOTE: It's a school assignment so it has to be in a table.
Here is a some fixed javascript. when you catch onclick event, it won't work on hidden elements. So I move event listener onto td:
var table = '';
for(var i = 0; i < 4; i++){
table += '<tr>';
for(var j = 0; j < 3; j++){
table += '<td align="center" onclick="click_it(this)">
<img src="./pics/image_part_00' + Math.floor((Math.random() * 6) + 1) + '.jpg"
width="100px" style="visibility: hidden"></td>';
}
table += '</tr>';
}
document.getElementById('theGame').innerHTML = '<table border=1 cellpadding="10" class="tabela1">' + table + '</table>';
function click_it(cell){
var image = cell.children[0];
image.style.visibility = 'visible';
}
You can search for the img child of the table cell
var child = element.childNodes;
The var child will return an array of elements, then you just need to access to the position that the is, and change the visibility attribute:
child[1].style.visibility = "visible";
You can try below,
just played a trick to match element id dynamically
to make it visible.
Added on click to td instead of image.
added id to image.
here is the code
<div id="theGame">
var table = '';
for (var i = 0; i < 4; i++) {
table += '<tr>';
for (var j = 0; j < 3; j++) {
table += '<td align="center" onclick="clicked(' + j + ')"> <img id=img_' + j + ' src="./pics/image_part_00' + Math.floor((Math.random() * 6) + 1) + '.jpg;" width="100px" style="visibility: hidden;"> </td>';
}
table += '</tr>';
}
document.getElementById('theGame').innerHTML = '<table border=1 cellpadding="10" class="tabela1">' + table + '</table>'
function clicked(element) {
document.getElementById('img_' + element).style.visibility = "visible";
}
I'm trying to read values ("img1.jpg", etc.) from a text file on my server and append to a div to create a slide show.
The only catch is I need the first "slide" to have a class of .active applied.
Here's how my text file reads:
Here's the div I want to append to looks like:
<div class="carousel-inner">
<!-- slide -->
<div class="active item slide3 animated fadeInUpBig">
<img src="img1.jpg" />
</div>
<!-- slide -->
<div class="item slide3 animated fadeInUpBig">
<img src="img2.jpg" />
</div>
</div>
Here's what I tried:
$(function () {
var file = "gallery.txt"; // gallery.txt PATH
$('<div />'.load(file, function(data){ // dummy DIV to hold data
var line = data.split('\n');
var NofImages = line.length -1;
for( i=0; i < NofImages; i++ ){
image = './cms/data/img/gallery/homepage/'+ line[i].split('|')[2];
$(".carousel-inner").append("<div class='active item slide3 animated fadeInUpBig'><img src='+ image +' /></div>");
}
}
});
$(function () {
var file = "gallery.txt"; // gallery.txt PATH
$('<div />').load(file, function(data){ // dummy DIV to hold data
var line = data.split('\n'),
NofImages = line.length -1,
imageURL = '';
for( i=0; i < NofImages; i++ ){
imageURL = './cms/data/img/gallery/homepage/'+ line[i].split('|')[2];
$(".carousel-inner").append("<div class='item slide3 animated fadeInUpBig'><img src='"+ imageURL +"' /></div>");
}
// NOW ADD THE .active TO FIRST ONE
$('.carousel-inner').find('.item').eq(0).addClass('active');
});
});
Difference between $.ajax() and $.get() and $.load()
so add a class if you are at zero
var activeClass = i==0 ? "active " : "";
$(".carousel-inner").append("<div class='" + activeClass + "item...
Try this:
$.get("gallery.txt").done(function(response) {
var lines = response.split("\n");
for (var i = 0; i < lines.length; i++) {
var fragments = lines[i].split("|");
var html = "<div class='item animated fadeInUpBig slide3'><img src='" + fragments[2] + "' /></div>";
$(".carousel-inner").append(html);
}
$(".carousel-inner .item").eq(0).addClass("active");
});