Can a div with content its own specific variable?

Question

So I use jquery often but dont actually know much about JS if we are being honest. I am going through W3schools and was working with this specific "try me" snippet

http://www.w3schools.com/js/tryit.asp?filename=tryjs_datatypes_array

So I thought - maybe I can play with it to make it more complicated and use it in a way that I would when personally coding a layout or UI.

So I created this JS fiddle. Trying to put a specific <div> as each variable. I was unsuccessful. What would be the proper way of achieving this?

Here is my JS FIDDLE

Here's the required code snippet of my Horrible js:

var boxes = [

"<div class='box' id='1'> hello1 </div>"

,"<div class='box' id='2'> hello2 </div>"

,"<div class='box' id='3'> hello3 </div>"

];

document.getElementById("demo").innerHTML = boxes[0]

If you are asking why your CSS isn't applying to your numbered id elements, it is because CSS selector identifiers must not start with a number — Patrick Evans
– Patrick Evans, Commented May 31, 2016 at 8:03

Marc Dix · Accepted Answer · 2016-05-31 08:15:00Z

4

What you did in your example is to replace the innerHTML of your demo element with the first element of your array. If you want to render all the divs to your demo element, can use one of the following solutions:

For modern browsers, you can use

var boxes = [
    "<div class='box' id='1'> hello1 </div>"
   ,"<div class='box' id='2'> hello2 </div>"
   ,"<div class='box' id='3'> hello3 </div>"
];

boxes.forEach(function(element) {
    document.getElementById("demo").innerHTML += element;
});

Check the fiddle.

If you need to support older browsers (IE8), use

var boxes = [
    "<div class='box' id='1'> hello1 </div>"
   ,"<div class='box' id='2'> hello2 </div>"
   ,"<div class='box' id='3'> hello3 </div>"
];

for (var i = 0; i < boxes.length; i++) {
    document.getElementById("demo").innerHTML += boxes[i];
}

Check the fiddle

If you care about performance, you should go the easy way

var boxes = [
    "<div class='box' id='1'> hello1 </div>"
   ,"<div class='box' id='2'> hello2 </div>"
   ,"<div class='box' id='3'> hello3 </div>"
];

document.getElementById("demo").innerHTML = boxes.join();

Check the fiddle.

edited May 31, 2016 at 8:15

answered May 31, 2016 at 7:59

Marc Dix

1,9891 gold badge17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Marc Dix Over a year ago

Nothing mentioned by OP.

Patrick Over a year ago

Why is it hiding the individual Id's css?

Patrick Evans Over a year ago

Also you shouldn't use += with innerHTML, it will cause the elements inside to be recreated and re-rendered each time

Patrick Over a year ago

as mentioned above i am in the process of w3schools tutorial and going in order. I was simply trying to take it a lil farther.

Marc Dix Over a year ago

@PatrickEvans He wanted to use arrays and play with it. If we talk about performance we'd of course join the array and render one string to the innerHTML.

|

Chippen · Accepted Answer · 2016-05-31 08:06:26Z

0

I am not sure what it is that was unsuccessful. The only problem that I see is that you do not get color from the CSS. That is due to id being only a digit. If you update your id to b1,b2,b3 (in JS and CSS) you get color.

But it is a bit unclear what you want to achieve.

answered May 31, 2016 at 8:06

Chippen

3492 silver badges10 bronze badges

1 Comment

Patrick Over a year ago

Can you give me an example of it working with an id?

Collectives™ on Stack Overflow

Can a div with content its own specific variable?

2 Answers 2

10 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related