why I cant set value for the div?

Question

I want to set value for the div ,I tried many ways but all of them didnt work. I think the syntax is correct because I made alots of research

.flip3d2{width:100px;height:100px;margin:10px; float:left;}
.flip3d2  .front{
position:absolute;
-webkit-transform:perspective(600px) rotateY(0degdeg);
transform: perspective(600px) rotateY(0deg);
background:#fc0;width:100px;height:100px;border-radius:7px;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transition:-webkit-transform .5s linear 0s;
transition:transform .5s linear 0s;
}

.flip3d2  .back{
position:absolute;
-webkit-transform:perspective(600px) rotateY(180deg);
transform: perspective (600px) rotateY(180deg);
background:#80bfff;width:100px;height:100px;border-radius:7px;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transition:-webkit-transform .5s linear 0s;
transition:transform .5s linear 0s;
}

.flip3d2:hover  .front
{
-webkit-transform:perspective(600px) rotateY(-180deg);
transform:perspective(600px) rotateY(-180deg);
}

.flip3d2:hover  .back
{
-webkit-transform:perspective(600px) rotateY(0deg);
transform:perspective(600px) rotateY(0deg);
}
</style>

<script>


var list = document.getElementsByClassName("mainwindow");
var list2=list.getElementsByClassName("flip3d2");
list2.getElementsByClassName("front").value = "red";
    list2.getElementsByClassName("front").text = "red";
list2.getElementsByClassName("front").innerHTML = "red";
</script>
</head>
<body>
<div class="mainwindow">
<div class="flip3d2">
<div class="back"> box 2 - back</div>
<div class="front"> box 2 - front</div>

</div>
</div>
</body>
</html>

Itried three ways to set values for the div but no one work.

you need to made more research because syntax is not correct - research what getElementsByClassName returns, then you'll see why you're doing it wrong — Jaromanda X, Jul 10 '15 at 00:55
@JaromandaX I think this question should be closed. With some more research OP should have figured it out. This is just another question about getElementsByClassName... — Michelangelo, Jul 10 '15 at 01:01
possible duplicate of [What does getElementsByClassName return?](http://stackoverflow.com/questions/10693845/what-does-getelementsbyclassname-return) — Michelangelo, Jul 10 '15 at 01:02
Well at least you all said exactly what I was thinking when I read the syntax lmao — EasyBB, Jul 15 '15 at 01:04

Arun P Johny · Answer 1 · 2015-07-10T01:01:08.850

getElementsByClassName returns a HTMLcollection(It is an array like object which can contain more than 1 element) object, not a direct dom reference so it doesn't have properties like innerHTML.

If you are sure about there will be only 1 element, then you can access the dom reference using the index, else you can iterate over the collection and set the content.

var list = document.getElementsByClassName("mainwindow")[0];
var list2 = list.getElementsByClassName("flip3d2")[0];
list2.getElementsByClassName("front")[0].innerHTML = "red";

//to loop
//var els = list2.getElementsByClassName("front");
//for(var i = 0; i <  els.length; i++){
//  els[i].innerHTML = 'something'
//}

.flip3d2 {
  width: 100px;
  height: 100px;
  margin: 10px;
  float: left;
}
.flip3d2 .front {
  position: absolute;
  -webkit-transform: perspective(600px) rotateY(0degdeg);
  transform: perspective(600px) rotateY(0deg);
  background: #fc0;
  width: 100px;
  height: 100px;
  border-radius: 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}
.flip3d2 .back {
  position: absolute;
  -webkit-transform: perspective(600px) rotateY(180deg);
  transform: perspective (600px) rotateY(180deg);
  background: #80bfff;
  width: 100px;
  height: 100px;
  border-radius: 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}
.flip3d2:hover .front {
  -webkit-transform: perspective(600px) rotateY(-180deg);
  transform: perspective(600px) rotateY(-180deg);
}
.flip3d2:hover .back {
  -webkit-transform: perspective(600px) rotateY(0deg);
  transform: perspective(600px) rotateY(0deg);
}

<div class="mainwindow">
  <div class="flip3d2">
    <div class="back">box 2 - back</div>
    <div class="front">box 2 - front</div>
  </div>
</div>

I tried this solution before but it did not work ,I THINK the code is correct but I do not know where is the fault — Bisher Andoura, Jul 13 '15 at 01:05

Nementon · Answer 2 · 2015-07-15T01:02:59.963

0

Till a class attribute do not required to be uniq, when you query element from it, you will get an array of elements, note the "s" in getElementsByClassName.

document.getElementsByClassName("front")[0].innerHTML = "red";

edited Jul 15 '15 at 01:02

answered Jul 10 '15 at 00:57

Nementon

26
2

I tried this solution before but it did not work ,I THINK the code is correct but I do not know where is the fault – Bisher Andoura Jul 13 '15 at 01:05
If you try to execute from the navigator console (F12 to open developer tools / navigate to javascript console) What kinds of errors do you get ? One possible error, is that because your javascript code is define before your html code, you have to wait untill the dom is ready before executing it. document.addEventListener('DOMContentLoaded',function(){/* Your js code here */ document.getElementsByClassName("front")[0].innerHTML = "red"; }); – Nementon Jul 15 '15 at 01:05

score 0 · Answer 3 · edited May 23 '17 at 10:26

There are a couple of things wrong with your code. As Arun P Johny's answer mentioned, getElementsByClassName returns a HTMLCollection, an array-like object, not a DOM node. You'll notice the s in getElementsByClassName, any DOM method that has Elements in it's name returns a HTMLCollection. Methods like getElementById (no s) return a single DOM node.

If you are used to using jQuery, jQuery provides an array-like object that has methods that will manipulate the whole collection, which might be why you are under the impression that you can do that with the collections that DOM methods return, but you unfortunately can't do that with HTMLCollections.

Because HTMLCollections are array-like, you can access their elements using bracket notation:

var list = document.getElementsByClassName("mainwindow")[0];
var list2 = list.getElementsByClassName("flip3d2")[0];
list2.getElementsByClassName("front")[0].textContent = "red";

Or you could use querySelector which will return a single DOM element based on a CSS selector:

var list = document.querySelector(".mainwindow");
var list2 = list.querySelector(".flip3d2");
list2.querySelector(".front").textContent = "red";

or if you don't need the reference to .mainwindow you could just do:

var list2 = document.querySelector(".mainwindow .flip3d2");

or if you don't need a reference to either .mainwindow or .flip3d2 for other things you could just do:

document.querySelector(".mainwindow .flip3d2 .front").textContent = "red"

The other problem with your code is that the script tag is above the HTML markup for the elements you are trying to access. At the time you call getElementsByClassName, those elements don't exist so you get an empty HTMLCollection object. Move the <script> tag below the <div> tags to fix that. It is a good practice to put scripts as low in the page as possible, it helps avoid this very common error and also improves the performance of your page.

A few other things,

HTMLDivElements don't have a .value property, setting it does nothing meaningful (although it will create an expando property.
A div doesn't have a .text property, you are probably looking for .textContent.
Using both .textContent and .innerHTML is redundant. .textContent will set the text of the element and then .innerHTML will immediately overwrite it. Use .textContent if what you are setting is pure text without any mark up. If you are injecting HTML from a reliable source (not user provided, that opens you up to XSS attacks) you can use .innerHTML.

why I cant set value for the div?

3 Answers3