Trying to hide a div if the heading of the page = "x"

Question

I'm trying to do some tweeking of a wordpress theme, and hide a certain div only on certain pages with some javascript, the code I have come up with is:

if(document.getElementsByClassName("page-title") === "NEW ARRIVALS"){
    document.getElementById("pull_9").style.visibility="hidden";
}else if(document.getElementsByClassName("page-title") === "SALE"){
    document.getElementById("pull_9").style.visibility="hidden";
}else{
    document.getElementById("pull_9").style.visibility="visible";
};

but its not working, I know that getElementByClassName() is not supper supported yet but it will do for these requirement.

can anyone see why this is not working? its probably something very simple (I'm new to javascript) but i cant theoretically see why it shouldn't work.

`document.getElementsByClassName("page-title")` will not return you a string, it will return a collection of elements. — Abhitalks, Jun 24 '14 at 06:43
`getElementsByClassName` is used to get you a list of element nodes, not a string. — aIKid, Jun 24 '14 at 06:44
Try using jquery, probably it's included in your theme (it is generalized), the fact that is not compatible with all browsers, it's a good reason to change. In jquery would be: if($(".page-title").hasClass("NEW ARRIVALS")), but classes cannot have two words, so there is sth you are doing wrong, "new arrival" are two classes. — netadictos, Jun 24 '14 at 06:45
i think jQuery will be the way too go, but im not trying to get the class name, im trying to say if a heading with the class of `.page-title` is "NEW ARRIVALS" then hide this other div. — Shout It Web Solutions, Jun 24 '14 at 06:47
well then @ShoutItWebSolutions, that isn't the method to use. You should use `var className = $('.myclass').attr('class');` to get the class name. — Wold, Jun 24 '14 at 06:49
@ShoutItWebSolutions: jQuery is not the answer to all of the world's problems. What is preventing you from using this: `document.getElementsByClassName("page-title")[0].innerText == 'NEW ARRIVALS'` ? — Abhitalks, Jun 24 '14 at 06:50
see [here](http://stackoverflow.com/questions/2400386/get-class-name-using-jquery) — Wold, Jun 24 '14 at 06:50
@abhitalks If his site already has jQuery on board why not use it? :) — Yury Tarabanko, Jun 24 '14 at 07:03
@YuryTarabanko: I am in agreement with you. But, will that solve the underlying problem? Unless he gets the concepts right, Op will do the same mistake with jQuery. Op will do the same mistake with any library for that matter. — Abhitalks, Jun 24 '14 at 07:07

score 2 · Answer 1 · answered Jun 24 '14 at 06:51

document.getElementsByClassName returns a set of elements. You would want to iterate through the set, or Array.filter the set…or simply get the first element in the set via bracket notation.

var set = document.getElementsByClassName('whatever');

var item = document.getElementsByClassName('whatever')[0];

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

Also, getElementsByClassName is currently supported by all desktop and mobile browsers:

http://caniuse.com/#search=getelementsbyclassname

Yury Tarabanko · Answer 2 · 2014-06-24T07:01:38.650

1

If jQuery is ok you can use :contains selector and toggle method

var show = !$('.page-title:contains(NEW ARRIVALS), .page-title:contains(SALE)')
            .length; 
$('#pull_9').toggle(show);

Working demo.

edited Jun 24 '14 at 07:01

answered Jun 24 '14 at 06:53

Yury Tarabanko

44,270
9
84
98

erosman · Accepted Answer · 2014-06-24T07:22:17.607

Are NEW ARRIVALS & SALE content of those elements?

If the page-title refers to the <title> tag, then you can use that

document.querySelector('title').textContent

If the page-title refers to ONE item or the FIRST item you can try:

document.querySelector('.page-title').textContent

Alternatively ...

var elem = document.getElementsByClassName('page-title');

for (var i = 0, len = elem.length; i < len; i++) {

  if (elem[i].textContent === 'NEW ARRIVALS' || 
      elem[i].textContent === 'SALE') {
    document.getElementById('pull_9').style.visibility = 'hidden'; 
    break;     
  }
}

Or ....

for (var i = 0, len = elem.length; i < len; i++) {

  if (elem[i].textContent.match(/NEW ARRIVALS|SALE/)) {
    document.getElementById("pull_9").style.visibility = 'hidden';
    break;    
  }
}

There are usually many ways to achieve the same objective.

If it is only one element that your code refers to ... then for example

if (document.querySelector('.page-title').textContent.match(/NEW ARRIVALS|SALE/)) {
  document.getElementById('pull_9').style.visibility = 'hidden'; 
}

Trying to hide a div if the heading of the page = "x"

3 Answers3