My goal is to have the appendChild(detail) appear after the appendChild(image) but it doesn't show up in the browser.
document.getElementById("myBtn2").addEventListener("click", hey);
function hey(){
for (i = 1; i < radio.length; i++){
f = radio[i].image ;
var item = document.createElement('div');
item.id = "box";
item.className = "dell";
item.style.height = "140px";
detail = document.createElement('div');
detail.className = "space";
image = document.createElement('img');
image.id = "pic";
image.className = "dell3";
image.setAttribute("src", f);
document.getElementById('case').appendChild(item).appendChild(image).appendChild(detail);
}
}
appendChild() returns the appended node. It's not chainable in the way that you think. In your code, item is appended to 'case', image to item and detail to image. Since image is an <img> element that should not have children, detail is not displayed.
The solution is to append each item separately to a document fragment, then append the document fragement to case.
var frag = document.createDocumentFragment();
var item = frag.appendChild(document.createElement('div'));
item.id = "box";
item.className = "dell";
item.style.height = "140px";
var detail = frag.appendChild(document.createElement('div'));
detail.className = "space";
var image = frag.appendChild(document.createElement('img'));
image.id = "pic";
image.className = "dell3";
image.setAttribute("src", f);
document.getElementById('case').appendChild(frag);
Note you probably want var keywords on the other variable assignments too as otherwise you'll create globals for each one implicitly. I've added these to the example changes I made. There are other optimisations you might want to make too, such as not doing the document.getElementById() lookup each time you loop (you can store it as a var outside of the loop).
Related
I Have a .js with multiply elements inside and functions and i use it with the 'document.write' in the index.js. I want this file to reuse it as 'new .js;' as many time i need it. Is there any way to do it?
Example:
var renderer = document.createElement('div');
var bG = document.createElement('div');
var icon = document.createElement('img');
var lock = document.createElement('img');
var delete = document.createElement('button');
var txt = document.createElement('p');
var users = document.createElement('button');
var rIcon = document.createElement('img');
(function () {
renderer.id = 'Renderer';
bG.id = 'BG';
icon.id = 'icon';
lock.id = 'Lock';
delete.id = 'Delete';
txt.id = 'txt';
users.id = 'Users';
rIcon.id = 'rIcon';
renderer.appendChild(bG),
renderer.appendChild(users), renderer.appendChild(txt), renderer.appendChild(lock),
renderer.appendChild(delete), renderer.appendChild(icon),renderer.appendChild(rIcon);
document.body.appendChild(renderer);
users.addEventListener('click', OnPress);
users.addEventListener('mouseover', OnrollOver);
users.addEventListener('mouseout', OnrollOut);
delete.addEventListener('click', DeleteClick);
}());
I am trying with no hope... Do i need to make it class with constructor but if i make it, and how i will make it, how i will use it with the 'document.write' cause i need it and before the recreation?
Regards.
The first thing I can tell you about, that you must keep away from the language keywords while naming your variables and function, like the delete variable you created.
The second thing, you can do that:
function createRenderer() {
let old = document.getElementsByClassName('Renderer')
let renderer = document.createElement('div');
let bG = document.createElement('div');
let icon = document.createElement('img');
let lock = document.createElement('img');
let deleteBu = document.createElement('button');
let txt = document.createElement('p');
let users = document.createElement('button');
let rIcon = document.createElement('img');
renderer.classList.add('Renderer')
renderer.id = 'Renderer' + old.length + 1;
bG.id = 'BG' + old.length + 1;
icon.id = 'icon' + old.length + 1;
lock.id = 'Lock' + old.length + 1;
deleteBu.id = 'Delete' + old.length + 1;
txt.id = 'txt' + old.length + 1;
users.id = 'Users' + old.length + 1;
rIcon.id = 'rIcon' + old.length + 1;
renderer.append( bG, icon, lock, deleteBu, txt, users, rIcon )
users.addEventListener('click', OnPress);
users.addEventListener('mouseover', OnrollOver);
users.addEventListener('mouseout', OnrollOut);
deleteBu.addEventListener('click', DeleteClick);
return renderer
}
and now your function is just a template for your renderer div, you can call it as much as you want, and every time you have an entirely new created renderer.
then you can use this function in many many places and you can assign it to a new variable too, and these how to use the function:
document.body.append( createRenderer() ) // to append the renderer to the body
document.body.appendChild( createRenderer() ) // the same the above
anotherElement.append( createRenderer() ) // to add the renderer to another div
and you can assign a new renderer in a new variable and use it as you can:
let newRendererOne = createRenderer()
newRendererOne.append( someChildren ) // to append new children for that specific renderer
let newRendererTwo = createRenderer()
newRendererTwo.style.color = "red" // to change the bg color for that specific render.
and you can create many of it inside a loop.
I hope the idea is clear now..
I have written a simple script and it's job is to change a innerHTML of a random element in one section of the page. Somehow when I call the function, and set it to fire every 1 second, when innerHTML of a specific element is changed, it doesn't stay that way , it just clears itself and moves on to another element. Can anyone help me with this. Here is the code, thanks in advance.
window.onload = function() {
var box1 = document.getElementById("one");
var box2 = document.getElementById("two");
var box3 = document.getElementById("three");
var box4 = document.getElementById("four");
var box5 = document.getElementById("five");
var box6 = document.getElementById("six");
var box7 = document.getElementById("seven");
var box8 = document.getElementById("eight");
var headingArray = ["RAVE", "RUN", "PAINT"];
var iconArray = ["ion-usb", "ion-android-walk", "ion-android-color-palette"];
var paragraphArray = ["Wanna good time? <br> Check out nearest party centres","Check out running tracks", "Ckeck out painting places"];
var boxArray = [box1,box2,box3,box4,box5,box6,box7,box8];
var heading = document.createElement("h2");
var icon = document.createElement("i");
var paragraph = document.createElement("p");
function getRandomNumberForContent() {
var randomHeading = Math.round(Math.random()*2) + 0;
return randomHeading;
}
function getRandomNumberForBox() {
var randomNumber = Math.round(Math.random()*7) + 0;
return randomNumber;
}
function changeBox() {
var random = getRandomNumberForContent();
heading.innerHTML = headingArray[random];
icon.className = "icon "+iconArray[random]+" big";
paragraph.innerHTML = paragraphArray[random];
var randomNum = getRandomNumberForBox();
boxArray[randomNum].innerHTML = "";
boxArray[randomNum].appendChild(heading);
boxArray[randomNum].appendChild(icon);
boxArray[randomNum].appendChild(paragraph);
}
setInterval(changeBox,1000);
}
You are somewhat moving the element to the new div each time the function is called, because you are assigning as a child the same element, not a copy of it.
You should create the new element inside the changeBox function.
That's the answer. If you create it outside the function, they will be a unique element that you are assigning either to one div or another.
I assume that it moves to another element because you append the same elements somewhere else. You could clone the elements when you append them:
boxArray[randomNum].appendChild(heading.cloneNode(true));
boxArray[randomNum].appendChild(icon.cloneNode(true));
boxArray[randomNum].appendChild(paragraph.cloneNode(true));
I'm rather new to this and currently have two instances of:
var img = new Image();
var div = document.getElementById('Latest_A');
img.onload = function() {
Latest_A.appendChild(img);
};
img.src = '../Latest_A.jpg';
(Then another, B and so forth)
Currently it's only calling the last instance? Anyway to call both or more?
I'm pretty sure you are attempting to add multiple images to the same <div> element from a list of image URLs.
This will take a list of URLs from an array and add each to a selected div. IT will also assign each a unique id in case you need to style each.
var div = document.getElementById('Latest_A');
var imageArray = ['http://placehold.it/200x200','http://placehold.it/200x300','http://placehold.it/300x200','http://placehold.it/200x150'];
for (var i = 0; i < imageArray.length; i++) {
var img = new Image();
img.id = 'image' + i;
img.src = imageArray[i];
div.appendChild(img);
}
<div id="Latest_A"></div>
I know this is a very common error but I have read and read and can't figure it out why. It's probably something very easy but I can't solve it by myself.
var item = document.createElement("div").className = "item";
var img = document.createElement("img").src = imgpath + $(this).attr("href");;
item.appendChild(img);
Any help is appreciated!
EDIT:
var item = document.createElement("div");
item.className = "item";
var img = document.createElement("img");
img.src = imgpath + $(this).attr("href");
item.append(img);
This throws the same error.
In your case you are creating a div and assigns it a class name, and the same value(class name) is assigned to the item variable. So it is a string value which does not have the appendChild method.
var item = document.createElement("div");
item.className = "item";
var img = document.createElement("img");
img.src = imgpath + $(this).attr("href");;
item.appendChild(img);
The same concept applies to img also
Problem is here
document.createElement("div").className = "item"
it will return a string which won't have a method called appendChild on it. You don't have any reference to the created div.
You should be doing like this
var item = document.createElement("div");
item.className = "item";
var img = document.createElement("img");
img.src = imgpath + $(this).attr("href");
item.appendChild(img);
Because item is the string "item", not an element. You need to break it up.
var item = document.createElement("div");
item.className = "item";
Same thing needs to happen with the image.
document.createElement("div").className = "item"; returns a string, not a DOM node, so it knows nothing about .appendChild(). Try this instead:
var item = document.createElement("div");
item.className = "item";
var img = document.createElement("img");
img.src = imgpath + $(this).attr("href");
item.appendChild(img);
I try to create img element via javascript and set it into td element, but id doesn't work. I can't see any image or icon that img is not found. My server is running on localhost now so that's the reason for img url
function fillTable(actualMarkers){
// Get array of classes without jQuery
var theTable = document.createElement('table');
theTable.id = 'actualPlaces';
// Note, don't forget the var keyword!
for (var i = 0, tr, tdName, tdId, tdImage, imgPlace ; i < actualMarkers.length; i++) {
tr = document.createElement('tr');
tdId = document.createElement('td');
tdImage = document.createElement('td');
tdName = document.createElement('td');
imgPlace = document.createElement('img');
imgPlace.src = 'http://localhost:8080/webapp/images/var/webapp/photos/small/tuc.png';
imgPlace.height = '20';
imgPlace.width = '20';
var marker = actualMarkers[i];
tdId.appendChild(document.createTextNode(marker.get("id")));
tdId.className = 'unvisible';
tdImage.appendChild(imgPlace);
tdName.appendChild(document.createTextNode(marker.get("name")));
tr.appendChild(tdId);
tr.appendChild(tdImage);
tr.appendChild(tdName);
theTable.appendChild(tr);
}
document.getElementById('foundPlaces').appendChild(theTable);
addRowHandlers();
}
Usually the src attribute look like :
imgPlace.src = 'photos/small/tuc.png';
Try to change your images path, but I think it's very strange have two time "webapp" in your src url.