Arrays are not working with If Statement

Question

New on StackOverFlow - Just have a simple question.

Could you please let me know why it is not changing the color of Div element when the condition is true for the If Statement. .MeTest's display property is Block - Also, no error messages are in the Console.

Here is my test code :

var x = document.getElementsByClassName("MeTest");

if (x[0].style.display == 'block')
{
  document.getElementsByClassName("haveIt")[1].style.backgroundColor = "red";
}

#MeTest {
  position: fixed;
  height: 200px;
  width: 200px;
  background-color: #fdacc3;
}

div {
  background: #4dd329;
  border: 1px solid white;
  height: 200px;
  width: 200px;
  display: block;
}

.MeTest {
  display: block;
}

<div class="MeTest"></div>
<div class="testThis" style="float: right;"></div>
<div class="haveIt" style="position: fixed; top: 400px;"></div>

Thanks!

Hit F12, you should see at least 1 error there

Bálint
– Bálint

2017-03-14 09:34:22 +00:00
Commented Mar 14, 2017 at 9:34 — Bálint
– Bálint, Commented Mar 14, 2017 at 9:34

Christos · Accepted Answer · 2017-03-17 18:32:26Z

3

You have only one element with the class name haveIt. So you should make the following change:

document.getElementsByClassName("haveIt")[0]

Furthermore, in orde the condition you check to be true, you should define a style with display block for the div with class MeTest.

var x = document.getElementsByClassName("MeTest");
if (x[0].style.display == 'block') 
{ 
    document.getElementsByClassName("haveIt")[0].style.backgroundColor = "red"; 
}

#MeTest{

    position: fixed;
    height: 200px;
    width: 200px;
    background-color: #fdacc3;

}

div{
    background: #4dd329;
    border: 1px solid white;
    height: 200px; width: 200px;
    display: block;
}

.MeTest{
    display: block;
}

<div class="MeTest" style="display: block;"></div>
<div class="testThis" style="float: right;"></div>
<div class="haveIt" style="position: fixed; top: 200px;"></div>

PS: I changed the value of top from 400px to 200px, in order to be seen when you run the snippet.

Update

I see that in my first question about statements, you changed to display to Block in the HTML DOM - When I call that element in the Css stylesheet and change the Display to Block, it doesn't work that way. Any thoughts why it is happening?

It doesn't work since the display property of the element is imposed by the style sheet, it's not a value included in the style attribute of the html element. That you can do in this case, it to make use of getComputedStyle method like in the below snippet.

var x = document.getElementsByClassName("MeTest");
var display = window.getComputedStyle(x[0],null)
                    .getPropertyValue("display");
if (display == 'block'){ 
    document.getElementsByClassName("haveIt")[0].style.backgroundColor = "red"; 
}

#MeTest{

    position: fixed;
    height: 200px;
    width: 200px;
    background-color: #fdacc3;

}

div{
    background: #4dd329;
    border: 1px solid white;
    height: 200px; width: 200px;
    display: block;
}

.MeTest{
    display: block;
}

<div class="MeTest"></div>
<div class="testThis" style="float: right;"></div>
<div class="haveIt" style="position: fixed; top: 200px;"></div>

For info regarding the Window.getComputedStyle please have a look [here].1

edited Mar 17, 2017 at 18:32

answered Mar 14, 2017 at 9:32

Christos

54.1k9 gold badges82 silver badges114 bronze badges

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

7 Comments

Rehan H Over a year ago

That's perfect Christos! Thanks so much!

Rehan H Over a year ago

Quick questions : Can we change the Css property of multiple elements with this method? Example : if I create multiple (almost 9 elements) elements inside 'MeTest' class element and then in J Script change the color of only 5 elements of that Array? This would be extremely helpful - Thanks in Advance!

Christos Over a year ago

Yes, this can be done. You should read about css selectors, in order to see how we select the children of a parent element. For instance if you want to grab all the paragraph elements iniside a div you could try something like this document.querySelectorAll("div > p"); . If you want to grab all the paragraph elements contained in a div with class MeTest you could try this document.querySelectorAll("div.MeTest > p");. For more info regarding this method, querySelectorAll, have a look here developer.mozilla.org/en-US/docs/Web/API/Document/….

Christos Over a year ago

Selecting the elements you want, then you can set their style properties fairly easily, as we have already done above.

Rehan H Over a year ago

Hey, Thanks Christos! I see that in my first question about statements, you changed to display to Block in the HTML DOM - When I call that element in the Css stylesheet and change the Display to Block, it doesn't work that way. Any thoughts why it is happening?

|

Sumit Mehta · Accepted Answer · 2017-03-14 10:15:58Z

0

var x = document.getElementsByClassName("MeTest")[0]; if (getComputedStyle(x).getPropertyValue("display")== 'block') { document.getElementsByClassName("haveIt")[1].style.backgroundColor = "red"; }

answered Mar 14, 2017 at 10:15

Sumit Mehta

391 silver badge7 bronze badges

2 Comments

Sumit Mehta Over a year ago

Actually, You have one div of "haveIt" class. Therefore u should use 'document.getElementsByClassName("haveIt")[0].style.backgroundColor = "red";' instead of 'document.getElementsByClassName("haveIt")[1].style.backgroundColor = "red";'

Rehan H Over a year ago

That's a good suggestion Sumit - Using ComputedStyle would be a good Idea. Thanks!

Collectives™ on Stack Overflow

Arrays are not working with If Statement

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related