CODEWITHSUNDEEP
javascripthtml
Bisher Andoura
Bisher Andoura

Reputation: 109

why I cant set value for the div?

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.

Upvotes: 0

Views: 87

Answers (3)

Useless Code
Useless Code

Reputation: 12412

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.

Upvotes: 0

Nementon
Nementon

Reputation: 26

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";

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

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>

Upvotes: 1

Related Questions