function createDiv(x) {
var dIv, t;
for (i = 0; i < 3; ++i) {
dIv = document.createElement("DIV");
t = document.createTextNode(i);
dIv.appendChild(t);
dIv.id = i;
dIv.style.color = "blue";
dIv.style.width = "100%";
dIv.style.height = "100%";
document.getElementById("SAREE").appendChild(dIv);
}
}
The above code is to create multiple depends the value passed (x). But
only one with id = 0 is created.
It's working, but the div take 100% of the body, just scroll down to see the others....
Try to replace height: 100% by height : 10% wand you will see all...
You need to reference x in the for loop count. That will give you the correct amount of divs.
function createDiv(x) {
var dIv, t;
for (i = 0; i <= x; i++) {
dIv = document.createElement("DIV");
t = document.createTextNode(i);
dIv.appendChild(t);
dIv.id = i;
dIv.style.color = "blue";
dIv.style.width = "100%";
dIv.style.height = "100%";
document.getElementById("SAREE").appendChild(dIv);
}
}
createDiv(2)
createDiv(5)
<div id="SAREE"></div>
Related
for(let i = 0; i < 8; i++) {
let childDiv = document.createElement('div');
divi.id = "addDay";
childDiv.className = "boxName";
divi.appendChild(childDiv);
childDiv.textContent = "0";
}
document.querySelector('#map');
map.appendChild(divi);
divi.firstChild.style.backgroundColor = "green";
change();
}
function change(){
n = document.getElementById('addDay');
n.firstChild.textContent = 'something';
}
I need to change content of first child of addDay on every click,but this function makes it only once. What do you think where is problem?
I am working on this project for school.
But I cannot figure out one problem.
I have 2 lines of boxed both colored, but I use a for loop and in the parameters don't work in the for loop. The lines have both different places and different length. So how could I use the parameters in the for loop? Just right so it would work everytime.
The code I have so far:
box('box', 3);
box('box2, 4);
function box(id,aantal){
for(var i = 0; i < aantal.length; i++){
var box = document.createElement("div");
box.style.height = "175px";
box.style.width= "175px";
box.style.borderRadius = "5px";
box.style.backgroundColor = "#e6e6e6";
box.style.marginLeft ="25px";
box.style.marginTop = "-160px";
box.style.float = "left";
document.getElementById(id).appendChild(box);
}
}
aantal parameter is a number thus you should not use aantal.length but simply
for (var i = 0; i < aantal; i++) {
box('box', 3);
box('box2', 4);
function box(id, aantal) {
for (var i = 0; i < aantal; i++) {
var box = document.createElement("div");
box.style.height = "175px";
box.style.width = "175px";
box.style.borderRadius = "5px";
box.style.backgroundColor = "#e6e6e6";
box.style.marginLeft = "25px";
box.style.float = "left";
document.getElementById(id).appendChild(box);
}
}
<div id="box"></div>
<div id="box2"></div>
box('box', 3);
box('box2', 4);
function box(id,aantal){
for(var i = 0; i < aantal; i++){
var box = document.createElement("div");
box.style.height = "175px";
box.style.width= "175px";
box.style.borderRadius = "5px";
box.style.backgroundColor = "#e6e6e6";
box.style.marginLeft ="25px";
box.style.marginTop = "-160px";
box.style.float = "left";
document.getElementById(id).appendChild(box);
}
}
From the code below, what I can see is that in the second call to box,
you are not closing the string, which would cause a runtime error. The call should look like this: box('box2', 4);. What is also a problem is that you are expecting aantal to be an array, since you are accessing it's length property. However, you are passing integers as aantal to the function.
box('box', 3);
box('box2, 4);
function box(id, aantal){
for(var i = 0; i < aantal.length; i++){
var box = document.createElement("div");
box.style.height = "175px";
box.style.width= "175px";
box.style.borderRadius = "5px";
box.style.backgroundColor = "#e6e6e6";
box.style.marginLeft ="25px";
box.style.marginTop = "-160px";
box.style.float = "left";
document.getElementById(id).appendChild(box);
}
}
If the function should create a number of boxes, then your loop should look more like for(var i = 0; i < aantal; i++), since aantal is a number itself. Such a loop would then create the number of boxes that you passed in as the second argument.
How to make a fixed size of an div element?
So that when i write in it ,it won't change the width.
Can't figure out what i did wrong.
part of code with css :
var table = document.body.getElementsByTagName("table");
for (var i = 0; i < table.length; i++) {
table[i].style.border = "solid";
table[i].style.borderWidth = "1px";
table[i].style.width = "1024px";
table[i].style.height = "auto";
table[i].style.textAlign = "left";
};
var tdAll = document.body.getElementsByTagName("td");
for (var i = 0; i < tdAll.length; i++) {
tdAll[i].style.border = "1px solid #dddddd";
tdAll[i].style.height = "30px";
};
var divALL = document.body.getElementsByTagName("div");
for (var i = 0; i < divALL.length; i++) {
divALL[i].style.height = "100%";
divALL[i].style.width = "100%";
divALL[i].style.lineHeight = "25px";
};
whole code on fiddle : https://jsfiddle.net/zzduqpky/
set max-width property
e.g. max-width="100px"
this will fixed the problem of div width.
The problem was solved by adding table-layout:fixed to my table styles. The table cell and div doesn't expand anymore.
Thank you everyone for their time!!!
I have a bunch of divs positioned on top of an image.
I am trying to make the fraction hidden by the div to appear on the mouse hover. To achieve this I tried setting the zIndex of the div to be lower than the one of the image so it gets revealed. But I can seem to select ALL the divs.
Here is my javascript code:
window.onload = function () {
var block = document.getElementById('container');
block.addEventListener('mouseover', function () {
var blocks = document.querySelectorAll("#container div");
var index = 0, length = blocks.length;
for (var index = 0; index < length; index++) {
blocks[index].style.zIndex = 2;
}
});
for (var i = 0; i < 40; i++) {
for (var j = 0; j < 40; j++) {
var div = document.createElement("div");
div.className = "block";
div.style.left = j * 25 + 'px';
div.style.top = i * 25 + 'px';
div.style.display = "inline-block";
div.style.verticalAlign = "top";
div.style.zIndex = "1";
document.getElementById("container").appendChild(div);
}
var jump = document.createElement("br");
document.getElementById("container").appendChild(jump);
}
};
Where did I go wrong? Thank you. The div container has the background image that is placed "under" the created inner divs.
document.querySelectorAll returns an array of elements. You would need to loop through them individually.
var blocks = document.querySelectorAll("#container div");
var index = 0, length = blocks.length;
for ( ; index < length; index++) {
blocks[index].style.zIndex = 1;
}
If you are only looking for a single element you can also use document.querySelector which returns the first element it finds that matches the selector and you can work directly on it as you originally had in your code.
I'm a begginer with javaScript. and I want to create number of windows (div) with loop operation only with javaScript.
This is my code:
var numOfWindows = 3;
var arrayDiv = new Array();
for (var i = 0; i < numOfWindows; i++)
{
arrayDiv[i] = document.createElement('div');
arrayDiv[i].id = 'block' + i;
arrayDiv[i].style.backgroundColor = 'green';
arrayDiv[i].className = 'block' + i;
document.body.appendChild(arrayDiv[i]);
}
but I see a blank screen.
Your JavaScript works perfectly, if you give the created elements some content, or specific dimensions in CSS:
var numOfWindows = 3;
var arrayDiv = new Array();
for (var i = 0; i < numOfWindows; i++)
{
arrayDiv[i] = document.createElement('div');
arrayDiv[i].id = 'block' + i;
arrayDiv[i].style.backgroundColor = 'green';
arrayDiv[i].className = 'block' + i;
// setting the textContent to the 'i' variable:
arrayDiv[i].textContent = i;
document.body.appendChild(arrayDiv[i]);
}
JS Fiddle demo.
Or:
var numOfWindows = 3;
var arrayDiv = new Array();
for (var i = 0; i < numOfWindows; i++) {
arrayDiv[i] = document.createElement('div');
arrayDiv[i].id = 'block' + i;
arrayDiv[i].style.backgroundColor = 'green';
arrayDiv[i].className = 'block' + i;
// setting the class-name of the created elements:
arrayDiv[i].className = 'bordered';
document.body.appendChild(arrayDiv[i]);
}
JS Fiddle demo.
Give your div a specified width and height.
div.style.width = '10px';
div.style.heigt = '10px';
Or give it content.