GetElementBy only works with ID not with classes

Question

With code below I want to insert some <content> once the user clicks on the <button>.

Before I went with this code which was working totally fine. Then I changed the id="content" to class="content" and the document.getElementById of the JavaScript code to getElementsByClassName and now the function is not working anymore.

What do I have to change my code so it also works with classes?

You can also find my code here.

window.myFunction = function () {
    var x = document.getElementsByClassName("content");
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

.content {
    width: 80%;
    padding: 10%
    text-align: center;
    background-color: lightblue;
    margin-top:20px;
}

<button onclick="myFunction()">Button</button>

<div class="content">
Content of element
</div>

change `ClassName()[0]` beacuse the classname is the multiple selector — prasanth, Aug 26 '17 at 06:19

score 3 · Answer 1 · answered Aug 26 '17 at 06:22

3

A better way to do this is:

var x = document.querySelector(".content");

answered Aug 26 '17 at 06:22

Punit Gupta

3,808
1
18
22

Hi Punit Gupta, in which why is it better then the getElementsByClassName method? I am a newbie and looking forward to some expert advice :-) – Michi Aug 26 '17 at 06:25
`querySelector` method can be used to refer to any DOM element with any simple as well as complex CSS selector. While it is perfectly okay to use `getElementById` and `getElementsByClassName` for single id or single className, `querySelector` can deal with cases like, '.content div' or '.content p', when you want to get a sub-tag under a class or id. – Punit Gupta Aug 26 '17 at 06:27
@Michi You can find expert advice using the "Google" search engine which will point you to hundreds and thousands of tutorials, intros, documentation pages, and blog posts. – Aug 26 '17 at 06:33

Christos · Accepted Answer · 2017-08-26T06:19:47.530

2

The method getElementsByClassName

Returns an array-like object of all child elements which have all of the given class names.

For more info please have a look here. For this reason you have to get the first element of your array, in order to have the same result. You can access it by using the index of 0.

window.myFunction = function () {
    var x = document.getElementsByClassName("content")[0];
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

.content {
    width: 80%;
    padding: 10%
    text-align: center;
    background-color: lightblue;
    margin-top:20px;
}

<button onclick="myFunction()">Button</button>

<div class="content">
Content of element
</div>

edited Aug 26 '17 at 06:19

answered Aug 26 '17 at 06:18

Christos

53,228
8
76
108

1

Hi Christos, thanks a lot for this fast answer. What does the [0] exactly mean? – Michi Aug 26 '17 at 06:19
I have also updated it here https://jsfiddle.net/9mj4ho2k/1/. – Michi Aug 26 '17 at 06:23
@Michi Ah ok, understood :) – Christos Aug 26 '17 at 06:26
As you can see by @Michi code getElementsByClassName returns an array. You may want to check out document.querySelector to avoid dealing with an array when using classes to identify unique elements. – Dale Corns Aug 26 '17 at 06:28
@Downvoter I would appreciate If you could point out what is wrong? Thanks in advance. – Christos Aug 26 '17 at 06:45
@DaleCorns Indeed mate, it can be used `document.querySelector`, in order to solve this problem. However, I wanted to show why `document.getElementsByClassName` didn't work in they that this method hd been used by the OP. – Christos Aug 26 '17 at 06:47

score 2 · Answer 3 · edited Aug 26 '17 at 06:37

2

You have different methods available in native javascript (for those not using jquery) to get any element on the page. These are

document.querySelectorAll()

document.querySelectorAll("div.classNameOne, div.classNameTwo");
document.querySelector(selector)

document.querySelector("div.className")
document.getElementById(idname of element)

document.getElementById("element_id")
document.getElementsByTagName(tagname - get all div or span on page)

document.getElementsByTagName("div")
document.getElementsByClassName(classname - get all elements with specific class name)

document.getElementsByClassName("your_css_class_name")
You can also get any attribute of element by

document.getElementsByTagName("H1")[0].getAttribute("class");

When it returns multiple elements, it returns them like an array. You can index them using an indexer starting from 0.

edited Aug 26 '17 at 06:37

answered Aug 26 '17 at 06:30

Amit Kumar Singh

4,393
2
9
22

Hi Amit, thanks for your answer and the advice. By the way, are there still a lot of people using jQuery or is it "outdated"? – Michi Aug 26 '17 at 06:32
No, jquery isn't outdated, nor is javascript. What I meant was people generally use lot of jquery for element selection kind of things. – Amit Kumar Singh Aug 26 '17 at 06:36
It's very hard to support the notion that jQuery is not outdated, looking at any metric of usage and adoption. – Aug 26 '17 at 06:37
1

Simple graph. Lot of them use it still. https://trends.builtwith.com/javascript/jQuery – Amit Kumar Singh Aug 26 '17 at 06:39
Do you also have any idea how to solve this issue here with the relative heights or if it is even possible to do it with relative heights: https://stackoverflow.com/questions/45862637/animation-of-jquery-slidetoggle-changes-by-adding-a-height – Michi Aug 26 '17 at 06:41
@Michi, I have added my comment on the question. – Amit Kumar Singh Aug 26 '17 at 06:49

GetElementBy only works with ID not with classes

3 Answers3