How to find whether an element is hidden or not in html and pure javascript

Question

This question was already answered here: Check if element is visible in DOM, but I am getting an error in the correct solution first option. It says:

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at isHidden (index.js:16)
    at hidde (index.js:12)
    at HTMLDocument.document.onkeypress (index.js:8)

This is my code:

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);
    var key = charStr;
    hidde(<element>)
};

function hidde(element) {
    return (isHidden(element))
}

function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none')
}

I changed <element> to the element I needed to check. Is there anything to correct?

Thanks in advance!!!

you should include that on your code above, `getElementsByClassName` returns an array. so you need to pass `Kitchen[0]` — I am L, Jul 07 '21 at 05:59

im_tsm · Accepted Answer · 2021-07-07T06:13:27.240

1

getElementsByClassName returns a collection. So if you are sure that it'll always return 1 element for your use case then use elements[0] to get the element.

var elements = document.getElementsByClassName('YOUR_CLASSNAME');
var element = elements[0];

edited Jul 07 '21 at 06:13

answered Jul 07 '21 at 06:01

im_tsm

1,965
17
29

If I say document.getElementByClassName('YOUR_CLASSNAME'); then it says that there is no function like that – viewy Jul 07 '21 at 06:04
1

Because it's `getElements` <--- THE S! It's plural! `ByClassName()` – slebetman Jul 07 '21 at 06:06

How to find whether an element is hidden or not in html and pure javascript

1 Answers1