Only execute code if element exists, but with no dublicate if statement in Javascript

Question

I was wondering if you could make this:

if(document.getElementsByClassName("whatever")[0]) {
    document.getElementsByClassName("whatever")[0].style.display = "none";
}

(It checkes if the element exists, and then only excicutes the code if it is true)

But without the if statment, because it doesn't look like a good practise to dublicate the document.getElementsByClassName("whatever")[0], and it makes it more anoying when having to do alot of bug testing with the document.getElementsByClassName.

You can save off the results of `document.getElementsByClassName("whatever")` into a variable and then check it as many times as you want without having to re-look through the DOM — mhodges, Mar 01 '21 at 21:21
Do you need it to work for all elements with the specified classNames or just first one? — Dan Cantir, Mar 01 '21 at 21:21
A good chance to read up [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) — Dominik, Mar 01 '21 at 21:22
@Dominik Just realized optional chaining is [not usable in the assignment case](https://stackoverflow.com/questions/58878948/optional-chaining-on-the-left-side-in-javascript), sadly. — jarmod, Mar 01 '21 at 21:24

Dave · Answer 1 · 2021-03-01T21:23:41.437

1

Simply set it to a variable, check if anything was found, and use that variable to modify it's display:

let whatever = document.getElementsByClassName("whatever");
if(whatever.length  > 0) {
    whatever[0].style.display = "none";
}

edited Mar 01 '21 at 21:23

answered Mar 01 '21 at 21:21

Dave

28,833
23
113
183

1

Subtle bug potential if the index was not zero. – Wyck Mar 01 '21 at 21:23

Dan Cantir · Answer 2 · 2021-03-01T21:35:48.117

If you need to only hide the first element with a specific className, you can define a method like this:

function hideIfExists(className){
    var elements = document.getElementsByClassName(className);
    if(elements.length  > 0){
      elements[0].style.display = 'none';
    }
   
}

Then use it like this:

hideIfExists('hello')
hideIfExists('someOtherClass')
...

If you need it to hide all elements, your method might look like this

function hideIfExists(className){
    var elements = document.getElementsByClassName(className);
    for (let item of elements) {
      item.style.display = 'none';
    }
}

score 1 · Answer 3 · answered Apr 19 '21 at 10:47

In my personal opinion, this is the simplest and still most elegant way to avoid the duplicate code, but also avoid extra code lines, so to keep it well readable:

if(elem = document.getElementsByClassName("whatever")[0]) {
    elem.style.display = "none";
}

Your editor might give you a warning about an assignment in a conditional expression. This seems totally okay to me, but you can avoid it by extra parens around the assignment. However, I think this reduces readability and should therefore better not be done.

Thanks, this is much cleaner :) – Tobias H. Apr 19 '21 at 17:19 — Tobias H., Apr 19 '21 at 17:19

score 0 · Answer 4 · answered Mar 01 '21 at 21:58

You could destructure the element and assign only if element is truthy.

const [element] = document.getElementsByClassName("whatever");

if (element) element.style.display = "none";

<div class="whatever">1</div>
<div class="whatever">2</div>
<div class="whatever">3</div>

Only execute code if element exists, but with no dublicate if statement in Javascript

4 Answers4